HTML structure:
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="Navigation.css">
<script src="Navigation.js" defer></script>
<title>Navigation</title>
<div class="navbar">
<video src="video-1.mp4" autoplay loop muted class="nav-video"></video>
<img src="img.png" class="navbar-img">
<nav class="nav">
<a href="#" class="nav-link"></a>
<a href="#" class="nav-link"></a>
<a href="#" class="nav-link"></a>
<a href="#" class="nav-link"></a>
<a href="#" class="nav-link"></a>
</nav>
</div>
CSS:
@font-face{
font-family:’AlfaSlabOne-Regular’;
src: url(‘AlfaSlabOne-Regular.ttf’);
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
font-size:62.5%;
}
.container{
height: 100vh;
display: grid;
place-items: center ;
background-color: rgb(44, 44, 63);
}
.navbar{
position: fixed;
width: 100%;
height: 100%;
background-color:#000;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.nav-video{
width: 100%;
height: 100%;
position: absolute;
object-fit: cover;
object-position: center;
opacity: 0.2;
z-index: -1;
}
.navbar-img {
width: 50%;
position: absolute;
top: 50%;
transform: translate(0,-50%);
opacity: 0.2;
transition: transform 1.5s;
}
.nav-link{
font-family:’AlfaSlabOne-Regular’ ;
font-size: clamp(3.5rem, 10cqi, 10rem);
text-decoration: none;
display: block;
letter-spacing: 0.2rem;
margin: 1rem 0;
}
.nav-link:hover {
transform: translateX(-2rem);
transition: transform 0.3s;
}
.nav-link span{
text-transform: uppercase;
display: inline-block;
color:#fff;
transform:translateX(0);
transition: color 0.5s, transform 0.5s;
}
.nav-link :hover span {
color: #ebe8c8;
transform: translateX(2rem);
transition-delay:calc(var (–i) + 0.2s) ;
}
@keyframes letterAnim {
0% {
transform: translate(0, 0);
color:#fff;
}
50% {
color: #E6A570;
JAVASCRIPT:
const links = […document.querySelectorAll(“.nav-link”)]
const navText = [‘About’, ‘Clients’ , ‘Portfolio’,
'Careers' , 'Fun']
links.forEach((link, i) => {
navText[i].split(”).forEach((letter,j) => {
const span = document.createElement(‘span’)
span.textContent = letter
span.style.cssText = --i: .${j}s
link.append(span)
})
})
P:S use any video or image of your choice. I just wanted the navigation to change color whenever I put my keyboard mouse on it.
}
100% {
transform: translate(2rem, 0) ;
color:#ebe8c8 ;
}
}
I tried the codes, it’s not showing me the display I want.
Emmanuel Eric is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.