DEV Community

Cover image for Navigation With Animated HERO Section
Farhad Rahmani
Farhad Rahmani

Posted on

Navigation With Animated HERO Section

#codepen #webdev #javascript #beginners

HTML Code `<!DOCTYPE html>





Change English

<sectio class="nav">
    <h1>FRONTEND TRENDS</h1>
    <h3 class="span loader"><span class="m">B</span><span class="m">E</span><span class="m">N</span><span
            class="m">E</span><span class="m">F</span><span class="m">I</span><span class="m">T</span><span
            class="m">S</span><span class="m">&nbsp;</span><span class="m">o</span><span class="m">f</span><span
            class="m">&nbsp;</span><span class="m">T</span><span class="m">E</span><span class="m">C</span><span
            class="m">H</span><span class="m">N</span><span class="m">O</span><span class="m">L</span><span
            class="m">O</span><span class="m">G</span><span class="m">I</span><span class="m">E</span><span
            class="m">S</span></h3>
    <div class="nav-container"><a class="nav-tab" href="#tab-svelte">SVELTE</a><a class="nav-tab"
            href="#tab-esbuild">ESBUILD</a><a class="nav-tab" href="#tab-next">NEXT.JS</a><a class="nav-tab"
            href="#tab-typescript">TYPESCRIPT</a><a class="nav-tab" href="#tab-vite">VITE</a><span
            class="nav-tab-slider"></span></div>
</sectio>
<main class="main">
    <section class="slider" id="tab-svelte">
        <h1>SVELTE</h1>
        <h2>another frontend JS framework</h2>
    </section>
    <section class="slider" id="tab-esbuild">
        <h1>ESBUILD</h1>
        <h2>an extremely fast JavaScript bundler</h2>
    </section>
    <section class="slider" id="tab-next">
        <h1>NEXT.JS</h1>
        <h2>framework for Production</h2>
    </section>
    <section class="slider" id="tab-typescript">
        <h1>TYPESCRIPT</h1>
        <h2>giving you better tooling at any scale</h2>
    </section>
    <section class="slider" id="tab-vite">
        <h1>VITE</h1>
        <h2>a frontend build tool</h2>
    </section>
</main>
<canvas class="background"></canvas>
<script src="script.js"></script>
Enter fullscreen mode Exit fullscreen mode

`

CSS Code

`

  • { margin: 0; padding: 0; box-sizing: border-box; }

body {
font-family: "ROBOTO", sans-serif;
}

.nav,
.slider {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
position: relative;
background-color: #1e1f26;
text-align: center;
padding: 0 2em;
}

.nav h1,
.slider h1 {
font-family: "Josefin Sans", sans-serif;
font-size: 5vw;
margin: 0;
padding-bottom: 0.5rem;
letter-spacing: 0.5rem;
color: #03dac6;
transition: all 0.3s ease;
z-index: 3;
}

h1:hover {
transform: translate3d(0, -10px, 22px);
color: #ff0266;
}

.slider h2 {
font-size: 2vw;
letter-spacing: 0.3rem;
font-family: "ROBOTO", sans-serif;
font-weight: 300;
color: #faebd7;
z-index: 4;
}

h3.span {
font-size: 2vw;
letter-spacing: 0.7em;
font-family: "ROBOTO", sans-serif;
font-weight: 300;
color: #faebd7;
z-index: 4;
}

span:hover {
color: #ff0266;
font-weight: 500;
font-size: 2.2vw;
}

a {
text-decoration: none;
}

.nav-container {
display: flex;
flex-direction: row;
position: absolute;
bottom: 0;
width: 100%;
height: 75px;
box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
background: #1e1f26;
z-index: 10;
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.nav-container--top-first {
position: fixed;
top: 75px;
transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.nav-container--top-second {
position: fixed;
top: 0;
}

.nav-tab {
display: flex;
justify-content: center;
align-items: center;
flex: 1;
color: #03dac6;
letter-spacing: 0.1rem;
transition: all 0.5s ease;
font-size: 2vw;
}

.nav-tab:hover {
color: #1e1f26;
background: #03dac6;
transition: all 0.5s ease;
}

.nav-tab-slider {
position: absolute;
bottom: 0;
width: 0;
height: 2px;
background: #03dac6;
transition: left 0.3s ease;
}

.background {
position: absolute;
height: 90vh;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: auto;
}

@media (min-width: 800px) {

.nav h1,
.slider h1 {
    font-size: 5vw;
}

.nav h2,
.slider h2 {
    font-size: 3vw;
}

.nav-tab {
    font-size: 3vw;
}
Enter fullscreen mode Exit fullscreen mode

}

@media screen only (min-width: 360px) {

.nav h1,
.slider h1 {
    font-size: 8vw;
}

.nav h2,
.slider h2 {
    font-size: 2vw;
    letter-spacing: 0.2vw;
}

.nav-tab {
    font-size: 1.2vw;
}
Enter fullscreen mode Exit fullscreen mode

}

.background {
position: absolute;
height: 100vh;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 0;
}

.loader span {
color: #faebd7;
text-shadow: 0 0 0 #faebd7;
-webkit-animation: loading 1s ease-in-out infinite alternate;
}

@-webkit-keyframes loading {
to {
text-shadow: 20px 0 70px #ff0266;
color: #ff0266;
}
}

.loader span:nth-child(2) {
-webkit-animation-delay: 0.1s;
}

.loader span:nth-child(3) {
-webkit-animation-delay: 0.2s;
}

.loader span:nth-child(4) {
-webkit-animation-delay: 0.3s;
}

.loader span:nth-child(5) {
-webkit-animation-delay: 0.4s;
}

.loader span:nth-child(6) {
-webkit-animation-delay: 0.5s;
}

.loader span:nth-child(7) {
-webkit-animation-delay: 0.6s;
}

.loader span:nth-child(8) {
-webkit-animation-delay: 0.7s;
}

.loader span:nth-child(9) {
-webkit-animation-delay: 0.8s;
}

.loader span:nth-child(10) {
-webkit-animation-delay: 0.9s;
}

.loader span:nth-child(11) {
-webkit-animation-delay: 1s;
}

.loader span:nth-child(12) {
-webkit-animation-delay: 1.1s;
}

.loader span:nth-child(13) {
-webkit-animation-delay: 1.2s;
}

.loader span:nth-child(14) {
-webkit-animation-delay: 1.3s;
}

.loader span:nth-child(15) {
-webkit-animation-delay: 1.4s;
}

.loader span:nth-child(16) {
-webkit-animation-delay: 1.5s;
}

.loader span:nth-child(17) {
-webkit-animation-delay: 1.6s;
}

.loader span:nth-child(18) {
-webkit-animation-delay: 1.7s;
}

.loader span:nth-child(19) {
-webkit-animation-delay: 1.8s;
}

.loader span:nth-child(20) {
-webkit-animation-delay: 1.9s;
}

.loader span:nth-child(21) {
-webkit-animation-delay: 2s;
}

.loader span:nth-child(22) {
-webkit-animation-delay: 2.1s;
}
`
JavaScript

`
/* Credit and Thanks:
Matrix - Particles.js;
SliderJS - Ettrics;
Design - Sara Mazal Web;
Fonts - Google Fonts
*/

window.onload = function () {
Particles.init({
selector: ".background"
});
};
const particles = Particles.init({
selector: ".background",
color: ["#03dac6", "#ff0266", "#000000"],
connectParticles: true,
responsive: [
{
breakpoint: 768,
options: {
color: ["#faebd7", "#03dac6", "#ff0266"],
maxParticles: 43,
connectParticles: false
}
}
]
});

class NavigationPage {
constructor() {
this.currentId = null;
this.currentTab = null;
this.tabContainerHeight = 70;
this.lastScroll = 0;
let self = this;
$(".nav-tab").click(function () {
self.onTabClick(event, $(this));
});
$(window).scroll(() => {
this.onScroll();
});
$(window).resize(() => {
this.onResize();
});
}

onTabClick(event, element) {
    event.preventDefault();
    let scrollTop =
        $(element.attr("href")).offset().top - this.tabContainerHeight + 1;
    $("html, body").animate({ scrollTop: scrollTop }, 600);
}

onScroll() {
    this.checkHeaderPosition();
    this.findCurrentTabSelector();
    this.lastScroll = $(window).scrollTop();
}

onResize() {
    if (this.currentId) {
        this.setSliderCss();
    }
}

checkHeaderPosition() {
    const headerHeight = 75;
    if ($(window).scrollTop() > headerHeight) {
        $(".nav-container").addClass("nav-container--scrolled");
    } else {
        $(".nav-container").removeClass("nav-container--scrolled");
    }
    let offset =
        $(".nav").offset().top +
        $(".nav").height() -
        this.tabContainerHeight -
        headerHeight;
    if (
        $(window).scrollTop() > this.lastScroll &&
        $(window).scrollTop() > offset
    ) {
        $(".nav-container").addClass("nav-container--move-up");
        $(".nav-container").removeClass("nav-container--top-first");
        $(".nav-container").addClass("nav-container--top-second");
    } else if (
        $(window).scrollTop() < this.lastScroll &&
        $(window).scrollTop() > offset
    ) {
        $(".nav-container").removeClass("nav-container--move-up");
        $(".nav-container").removeClass("nav-container--top-second");
        $(".nav-container-container").addClass("nav-container--top-first");
    } else {
        $(".nav-container").removeClass("nav-container--move-up");
        $(".nav-container").removeClass("nav-container--top-first");
        $(".nav-container").removeClass("nav-container--top-second");
    }
}

findCurrentTabSelector(element) {
    let newCurrentId;
    let newCurrentTab;
    let self = this;
    $(".nav-tab").each(function () {
        let id = $(this).attr("href");
        let offsetTop = $(id).offset().top - self.tabContainerHeight;
        let offsetBottom =
            $(id).offset().top + $(id).height() - self.tabContainerHeight;
        if (
            $(window).scrollTop() > offsetTop &&
            $(window).scrollTop() < offsetBottom
        ) {
            newCurrentId = id;
            newCurrentTab = $(this);
        }
    });
    if (this.currentId != newCurrentId || this.currentId === null) {
        this.currentId = newCurrentId;
        this.currentTab = newCurrentTab;
        this.setSliderCss();
    }
}

setSliderCss() {
    let width = 0;
    let left = 0;
    if (this.currentTab) {
        width = this.currentTab.css("width");
        left = this.currentTab.offset().left;
    }
    $(".nav-tab-slider").css("width", width);
    $(".nav-tab-slider").css("left", left);
}
Enter fullscreen mode Exit fullscreen mode

}

new NavigationPage();
/* Credit and Thanks:
Matrix - Particles.js;
SliderJS - Ettrics;
Design - Sara Mazal Web;
Fonts - Google Fonts
*/

`

Top comments (0)

Read next

sarahokolo profile image

Compare prices across AliExpress, eBay, & Amazon.

sahra 💫 -

c_yatteau profile image

Enhance Your ArcGIS Web App with OpenAI

Courtney Yatteau -

moopet profile image

How to get into your CMS when you've locked the keys in your car.

Ben Sinclair -

neerajs profile image

Global Error Handling in Angular

Neeraj Singh -