WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Infinite Tags Scroll
5402
alex
Open In Editor
Publish Your Code
Recommended
11 March 2024
PingPong Game
26 May 2025
Admin Dashboard HTML CSS
15 May 2024
animation text
HTML
Copy
Infinite Scroll
HTML Templates
CSS Login Forms
JS
SSG
webdev
animation
UI/UX
SSG
webdev
animation
UI/UX
CSS
Copy
.scroller { max-width: 900px; } .scroller__inner { padding-block: 1rem; display: flex; flex-wrap: wrap; gap: 1rem; } .scroller[data-animated="true"] { overflow: hidden; -webkit-mask: linear-gradient( 90deg, transparent, white 20%, white 80%, transparent ); mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent); } .scroller[data-animated="true"] .scroller__inner { width: max-content; flex-wrap: nowrap; animation: scroll var(--_animation-duration, 40s) var(--_animation-direction, forwards) linear infinite; } .scroller[data-direction="left"] { --_animation-direction: forwards; } .scroller[data-speed="fast"] { --_animation-duration: 40s; } @keyframes scroll { to { transform: translate(calc(-50% - 0.5rem)); } } html { color-scheme: dark; } body { display: grid; min-block-size: 100vh; place-content: center; font-family: system-ui; font-size: 1.125rem; } .tag-list { margin: 0; padding-inline: 0; list-style: none; } .tag-list li { padding: 1rem; background-color: transparent; border: 1px solid #eceff133; border-radius: 0.5rem; }
JS
Copy
const scrollers = document.querySelectorAll(".scroller"); addAnimation(); function addAnimation() { scrollers.forEach((scroller) => { scroller.setAttribute("data-animated", true); const scrollerInner = scroller.querySelector(".scroller__inner"); const scrollerContent = Array.from(scrollerInner.children); scrollerContent.forEach((item) => { const duplicatedItem = item.cloneNode(true); duplicatedItem.setAttribute("aria-hidden", true); scrollerInner.appendChild(duplicatedItem); }); }); }