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
5608
alex
Abrir en el editor
Video
Publica tu código
9
Recomendado
5 July 2025
Código HTML CSS del pie de página del sitio web en modo oscuro
22 April 2025
Un código de hanyhelmy119
15 September 2025
Ejemplo de animación de cuadrícula CSS
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); }); }); }