WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Barra de navegación desplazable
1326
pufffissal
Abrir en el editor
Publica tu código
Recomendado
31 July 2025
Ejemplo de botón de neón HTML
5 August 2025
El miedo a perderse
10 July 2025
Animación de interfaz flotante CSS
HTML
Copy
Animated Scrolling Nav
Main
Profile
Social
About
Your tittle <3
Profile
Social
About
CSS
Copy
@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
Copy
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 handleLinkClick(event) { event.preventDefault(); const targetId = this.getAttribute('href'); const targetElement = document.querySelector(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth' }); } } 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); });