WEBLEB
Accueil
Éditeur
Connexion
Pro
Français
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Défilement infini de tags
5078
alex
Ouvrir dans l'éditeur
Publiez votre code
Recommandé
28 August 2025
Installation de panneaux solaires | Services et tarifs
31 March 2024
Carrousel de cartes JavaScript
21 May 2024
Jeu de serpent
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); }); }); }