WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
1136
Andev.web
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
22 April 2025
Un codice di andres.stahr
18 October 2024
Dashboard della carta
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); }
