WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Staggered Blink Text Menu
676
ytr3d3
Open In Editor
Publish Your Code
Recommended
19 November 2024
Show text on hover
28 November 2024
Pure horizontal slider with sliding menu
30 March 2025
Text Scramble Effect
HTML
Copy
CodePen - Staggered Blink Text Menu
Home
Archives
Tags
Categories
About
CSS
Copy
@import url(https://fonts.googleapis.com/css?family=Lato); body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #1A1E23; } .blink-text-menu { display: flex; flex-direction: column; list-style-type: none; } .blink-text-menu li a { position: relative; display: flex; padding: 6px; color: white; font-family: Lato, sans-serif; text-decoration: none; } .blink-text-menu li a span { position: relative; overflow: hidden; transition: 0.6s; } .blink-text-menu li a span .out { display: inline-flex; } .blink-text-menu li a span .in { position: absolute; left: 0; opacity: 0; transform: translateX(100%); } .blink-text-menu li a:hover span .out { opacity: 0; transform: translateX(-100%); } .blink-text-menu li a:hover span .in { opacity: 1; transform: translateX(0); }
JS
Copy
"use strict"; let blinkTextMenuLinks = document.querySelectorAll(".blink-text-menu li a"); blinkTextMenuLinks.forEach(link => { let letters = link.textContent.split(""); link.textContent = ""; letters.forEach((letter, i) => { i += 1; let span = document.createElement("span"); let delay = i / 20; if (i % 2 === 0) { delay -= 0.1; } else { delay += 0.05; } let letterOut = document.createElement("span"); letterOut.textContent = letter; letterOut.style.transitionDelay = `${delay}s`; letterOut.classList.add("out"); span.append(letterOut); let letterIn = document.createElement("span"); letterIn.textContent = letter; letterIn.style.transitionDelay = `${delay}s`; letterIn.classList.add("in"); span.append(letterIn); link.append(span); }); });