Ever wished your navbar could do more than just sit at the top of the page? With a parallax-inspired background and smooth hover transitions, your menu can become the star of the UI. In this post, we’ll create a visually striking parallax-style navbar using nothing more than plain HTML, CSS, and a sprinkle of JavaScript.
🌟 What We’re Building
A full-screen navigation menu with the following features:
- Parallax-inspired background that reacts to hover
- Smooth fade and movement transitions
- Dynamic background positioning using JavaScript
🧱 Project Structure
parallax-navbar/
├── index.html
├── style.css
└── script.js
🧩 Step 1: HTML Skeleton
The index.html sets up a full-screen menu with four items and two
background layers: one pattern and one image.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax Nav</title>
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova&display=swap" rel="stylesheet">
</head>
<body>
<div id="menu">
<div id="menu-items">
<div class="menu-item">Home</div>
<div class="menu-item">Shop</div>
<div class="menu-item">About</div>
<div class="menu-item">Contact Us</div>
</div>
<div id="menu-background-pattern"></div>
<div id="menu-background-image"></div>
</div>
<script src="script.js"></script>
</body>
</html>
🎨 Step 2: Styling with CSS
This is where the magic happens. We create a pattern using radial gradients and a background image that moves when menu items are hovered over. Here's a snippet:
body {
background-color: rgb(20, 20, 20);
margin: 0;
font-family: 'Ibarra Real Nova', serif;
}
#menu {
display: flex;
align-items: center;
width: 100vw;
height: 100vh;
}
#menu-items{
margin-left: clamp(4rem, 20vw, 48rem);
position: relative;
z-index: 2;
}
.menu-item {
color: white;
font-size: clamp(3rem, 8vw, 8rem);
cursor: pointer;
padding: 0.5rem 0;
transition: opacity 0.4s ease;
}
The real parallax illusion is created using these clever data attributes and background shifts:
#menu[data-active-index="0"] > #menu-background-pattern{
background-position: 0% -25%;
}
#menu[data-active-index="1"] > #menu-background-pattern{
background-position: 0% -50%;
}
#menu[data-active-index="2"] > #menu-background-pattern{
background-position: 0% -75%;
}
#menu[data-active-index="3"] > #menu-background-pattern{
background-position: 0% -100%;
}
#menu[data-active-index="0"] > #menu-background-image{
background-position: center 45%;
}
#menu[data-active-index="1"] > #menu-background-image{
background-position: center 50%;
}
#menu[data-active-index="2"] > #menu-background-image{
background-position: center 55%;
}
#menu[data-active-index="3"] > #menu-background-image{
background-position: center 60%;
}
#menu-background-pattern{
background-image: radial-gradient(rgba(255,255,255,0.1)9%, transparent 9%);
background-position: 0% 0%;
background-size: 12vmin 12vmin;
height: 100vh;
left: 0px;
position: absolute;
top: 0px;
transition: opacity 800ms ease, background-size 800ms ease, background-position 800ms ease;
width: 100vw;
z-index: 1;
}
#menu-background-image{
background-image: url("image.jpg");
background-position: center 40%;
background-size: 100vmax;
height: 100%;
left: 0;
opacity: 0.15;
position: absolute;
top: 0;
transition: opacity 800ms ease, background-size 800ms ease, background-position 800ms ease;
width: 100%;
z-index: 0;
}
#menu-items:hover ~ #menu-background-pattern{
background-size: 11vmin 11vmin;
opacity: 0.5;
}
#menu-items:hover ~ #menu-background-image{
background-size: 50vmax;
opacity: 0.1;
}
#menu-items:hover > .menu-item{
opacity: 0.3;
}
#menu-items > .menu-item:hover{
opacity: 1;
}
Replace background-image with your own image in the
#menu-background-image section.
🎨 Pro Tip: Try adding a blurred version of your background image to increase the parallax illusion.
🧠Step 3: Making It Interactive with JavaScript
This short script tracks which menu item the user is hovering over and
dynamically updates the background position using a
data-active-index attribute.
const menu = document.getElementById("menu");
Array.from(document.getElementsByClassName("menu-item")).forEach((item, index) => {
item.onmouseover = () => {
menu.dataset.activeIndex = index;
}
});
No external libraries needed. Just raw DOM manipulation.
🧪 Final Result
When you hover over each menu item, the background shifts slightly, giving you that smooth parallax feel. It's subtle, elegant, and fully responsive.
Demo Preview:
🚀 Wrap-up
With just three simple files—index.html, style.css,
and script.js—you’ve built an interactive navbar with dynamic
visuals that feel alive. It’s lightweight, performance-friendly, and easily
customizable for personal or commercial projects.
Next Steps:
- Add click handlers to navigate between pages
- Implement smooth page transitions
Let your creativity run wild—this is just the beginning!
Enjoyed this tutorial? Share your creations or ideas in the comments below. Happy coding!
0 Comments