WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Animation de titre interactive
1249
Andev.web
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
25 August 2024
Effet de survol GSAP
28 November 2024
Page de destination – Piratage
15 May 2025
Un code de Mete
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); }