WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
इंटरैक्टिव शीर्षक एनीमेशन
1821
Andev.web
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
8 July 2025
पूर्वावलोकन कार्ड एनीमेशन (सीएसएस स्प्राइट्स) के साथ चरित्र चयन
22 September 2025
HTML न्यूरॉन एनीमेशन स्निपेट
30 August 2024
शुद्ध सीएसएस वन डिव हाउस उत्तरदायी एनीमेशन
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); }
