Barre de navigation à défilement

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

10 December 2025

Démo du jeu de physique ragdoll Matter.js

17 December 2024

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Animated Scrolling Nav</title>
</head>

<body>

<header>
        <img src="images/logo.png" id="logo">
        <nav>
            <a href="#main">Main</a>
            <a href="#profile">Profile</a>
            <a href="#social">Social</a>
            <a href="#about">About</a>
            <button id="menu">
                <span></span>
                <span></span>
            </button>
        </nav>
    </header>

<div id="container">
        <section id="main" style="background-image: url(images/1.jpg);">
            <h1>Your tittle <3</h1>
        </section>
        <section id="profile" style="background-image: url(images/2.jpg);">
            <h1>Profile</h1>
        </section>
        <section id="social" style="background-image: url(images/3.jpg);">
            <h1>Social</h1>
        </section>
        <section id="about" style="background-image: url(images/4.jpg);">
            <h1>About</h1>
        </section>
    </div>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

body{
    background-color: #000;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden;
}

#container{
    transition: 1s all ease-in-out;
}

#container.menuopen{
    filter: blur(8px);
    transform: scale(1.2);
}

section{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    position: relative;
    background-size: cover;
    padding: 50px;
}

section::after{
    content: "";
    position: absolute;
    background-color: #000;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0.5;
}

section h1{
    font-size: 120px;
    z-index: 2;
}

header{
    z-index: 9999;
    position: relative;
}

header #logo{
    position: fixed;
    top: 30px;
    left: 0;
    right: 0;
    width: 70px;
    height: auto;
    margin: 0 auto;
    opacity: 1;
    transition: all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0.6s;
}

header nav{
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    right: 0;
    width: 420px;
    z-index: 100;
    top: 130px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: 1s all cubic-bezier(0.080, 0.9, 0.18, 1) 0.2s;
}

header nav a{
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    padding: 10px 16px;
    font-size: 18px;
    letter-spacing: 1.8px;
    transition: 0.3s all cubic-bezier(0.080, 0.9, 0.18, 1) 0.6s, 0.3s color ease;
}

header nav a:hover{
    color: #000;
}

header nav button{
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    width: 60px;
    height: 60px;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: absolute;
    z-index: 100;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 100%;
    cursor: pointer;
    transform: scale(0);
    transition: 0.3s all cubic-bezier(0.080, 0.9, 0.18, 1) 0.2s;
}

header nav button span{
    width: 50%;
    background-color: #fff;
    height: 3px;
    display: block;
    margin: 4px auto;
    transform: scale(0);
    transition: 0.6s transform cubic-bezier(0.080, 0.9, 0.18, 1) 0s, 0.3s margin ease-in 0s;
}

header nav button:hover span{
    margin: 9px auto;
}

header.sticky #logo{
    opacity: 0;
}

header.sticky nav{
    top: 20px;
    padding: 0;
    width: 80px;
    height: 80px;
}

header.sticky nav button{
    transform: scale(1);
    transition-delay: 0.3s;
}

header.sticky nav button span{
    transform: scaleX(1);
    transition: 0.6s transform cubic-bezier(0.080, 0.9, 0.18, 1) 0.8s, 0.3s margin ease-in 0s;
}

header.sticky nav a{
    opacity: 0;
    transform: scale(0.3);
    transition-delay: 0.1s;
}

@media screen and (max-width: 520px) {
    
    header nav{
        height: 60px;
        width: 390px;
    }

header nav button{
        width: 50px;
        height: 50px;
    }

header nav a{
        font-size: 16px;
    }

section h1{
        font-size: 80px;
    }

header.sticky nav{
        width: 70px;
        height: 70px;
    }

}

JS

document.addEventListener('DOMContentLoaded', function () {
    const header = document.querySelector('header');
    const container = document.getElementById('container');
    const menuButton = document.getElementById('menu');
    const links = document.querySelectorAll('a[href^="#"]');

function handleScroll() {
        container.classList.remove('menuopen');
        header.classList.toggle('sticky', window.scrollY >= 100);
    }

function handleMenuButtonClick() {
        header.classList.remove('sticky');
        container.classList.toggle('menuopen');
    }

function handleCloseOutside(event) {
        if (!menuButton.contains(event.target)) {
            
            container.classList.remove('menuopen');
            header.classList.add('sticky');
        }
    }

window.addEventListener('scroll', handleScroll);
    menuButton.addEventListener('click', handleMenuButtonClick);
    links.forEach(link => link.addEventListener('click', handleLinkClick));

document.addEventListener('click', handleCloseOutside);
});

Barre de navigation à défilement

Recommandé

Démo du jeu de physique ragdoll Matter.js

Terminal de piratage

réseaux sociaux

HTML

CSS

JS

Recommandé

Démo du jeu de physique ragdoll Matter.js

Terminal de piratage

réseaux sociaux

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS