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"