Composant
Bannière de Scroll Infini
Créez une bannière à défilement infini fluide et personnalisable, avec contrôle de la direction et pause au survol pour une meilleure expérience utilisateur.
Exemple de bannière infinie Webflow
Bannière de logo
Tutoriel - Comment créer une Bannière de Scroll Infinie sur Webflow ?
/ 1
Copiez ce script et collez-le dans le <head> de votre page.
<!-- [Labs by Synqro] Infinite Scroll Banner -->
<script async src="https://cdn.jsdelivr.net/npm/@synqro/infinite-logo@1/dist/index.min.js"></script>

/ 2
Comment structurer vos éléments ?
Structurez vos éléments en plaçant les items de la bannière dans un conteneur parent banner-container et répétez les blocs item_banner pour créer un défilement infini fluide.

/ 3
Ajoutez les attributs requis
Vous pouvez trouver les attributs dans les Settings de votre éléments.
Ajoutez les attributs à votre banner-container
Name
Default Value
Description
sl-infinite-logo-name
"client-list"
Cible l'élément comme étant le conteneur des éléments à faire défiler

Ajoutez les attributs à votre item_banner
Name
Default Value
Description
sl-infinite-logo-item
""
Identifie l'élément de la bannière comme l'item devant défiler

/ 4
Ajoutez les attributs de personnalisation
Vous pouvez ajouter ces attributs à banner-container afin de personnaliser l'animation de votre bannière.
Name
Default Value
Description
sl-infinite-logo-speed
30
Durée de l'animation en secondes.
Nombre entier situé entre 0 et 30
sl-infinite-logo-dir
left
Définie la direction du scroll de la bannière.
"left" / "right
sl-infinite-logo-hover
true
Indique si l'animation doit se mettre en pause au survol de la souris.
"true" / "false"