Barra de navegación desplazable

Abrir en el editor Publica tu código ¿Necesitas un sitio web?

Recomendado

21 July 2025

Formulario de registro de inicio de sesión giratorio 3D HTML CSS

10 April 2025

<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);
});

Barra de navegación desplazable

Recomendado

Formulario de registro de inicio de sesión giratorio 3D HTML CSS

Un código de cleanbug411

Sistemas de TI y redes

HTML

CSS

JS

Recomendado

Formulario de registro de inicio de sesión giratorio 3D HTML CSS

Un código de cleanbug411

Sistemas de TI y redes

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS