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.