WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Staggered Blink Text Menu
539
ytr3d3
Open In Editor
Publish Your Code
Recommended
12 May 2025
Text To File
13 November 2024
navigation menu
2 March 2023
Slide Text 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); }); });