WEBLEB
Inicio
Editora de código
Iniciar sesión
Pro
Español
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Desplazamiento Infinito de Etiquetas
5074
alex
Abrir en el editor
Publica tu código
Recomendado
26 January 2025
Un código de Redllowge
28 December 2024
Un código de staticdata256
16 May 2025
Un código de Maxi-Digital
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); }); }); }