Barra de navegación desplazable

1,937 pufffissal

Abrir en el editor Publica tu código

Recomendado

14 September 2024

Interacción con carteles de películas

31 August 2024

Página de inicio de sesión

14 September 2024

Carrusel de portafolios con controles deslizantes sincronizados

HTML

<!DOCTYPE html>
<html lang="en">

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

}

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