WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animación de título interactivo
1396
Andev.web
Abrir en el editor
Publica tu código
Recomendado
25 May 2025
Un código de qatar2023
28 March 2025
Un código de mcdonge13
13 June 2025
Un código de Metehan
HTML
Copy
Andev Web
Andev Web
CSS
Copy
body { display: grid; place-items: center; height: 100vh; background-color: black; margin: 0rem; overflow: hidden; } h1 { font-family: 'Space Mono', monospace; font-size: clamp(3rem, 10vw, 10rem); color: white; padding: 0rem clamp(1rem, 2vw, 3rem); border-radius: clamp(0.4rem, 0.75vw, 1rem); } h1:hover { background-color: white; color: black; }
JS
Copy
const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; let interval = null; document.querySelector("h1").onmouseover = event => { let iteration = 0; clearInterval(interval); interval = setInterval(() => { event.target.innerText = event.target.innerText .split("") .map((letter, index) => { if(index < iteration) { return event.target.dataset.value[index]; } return letters[Math.floor(Math.random() * 26)] }) .join(""); if(iteration >= event.target.dataset.value.length){ clearInterval(interval); } iteration += 1 / 3; }, 50); }