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
1857
Andev.web
Abrir en el editor
Publica tu código
Recomendado
17 May 2024
Aplicación del tiempo
7 October 2025
Fragmento de animación de carga de CSS
30 June 2025
Producción de acero, industria metalúrgica | Hierro y acero Inc.
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Andev Web</title> <link rel="stylesheet" href="style.css"> <body> <h1 data-value="Web Leb">Andev Web</h1> <script src="script.js"></script> </body> </html>
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); }
