# Comment créer un défilement infini (infinite marquee) de logos dans Webflow
Tutoriel3 minPublié le Aug 28, 2023Dernière mise à jour le Sommaire
[
Copied](#)[
](#)[
](#)[
](#)
- [H2 Example](#)
Résumez cet article avec une IA[
ChatGPT](#)[
Claude](#)[
Grok](#)[
Perplexity](#)[
Google AI](#)Points clés de l'article**Introduction :**
Pour capter l’attention de vos visiteurs, l’une des priorités est de créer une expérience utilisateur engageante et mémorable. Des éléments visuels accrocheurs sont un bon moyen d’y arriver.
L'un de ces éléments visuel est le défilement infini (marquee) de logos, une bonne manière de présenter une série de logos ou même d'images qui se déplacent en boucle.
Dans cet article, nous allons explorer comment intégrer cette touche dynamique dans votre [site Webflow](/fr/services/agence-webflow), soit grâce aux **interactions de Webflow**, soit avec quelques lignes de **code personnalisé**, soit avec une **troisième option plus avancée**, chacun ayant ses avantages et ses inconvénients.
Allez, c’est parti !
## **Qu'est-ce qu'un “infinite marquee” et pourquoi l'utiliser ?**
L'infinite marquee est donc un **effet de défilement continu** qui permet à des éléments, tels que des logos ou des images, de se déplacer horizontalement **en boucle**. Cet effet apporte du dynamisme à votre site, attirant instantanément le regard des visiteurs vers les éléments en mouvement. Il peut être utilisé de différentes manières :
- **Logos de clients ou témoignages :** utilisez l'infinite marquee pour mettre en valeur les logos ou les témoignages de vos clients afin de renforcer votre crédibilité.
- **Projets récents :** mettez en avant vos projets récents ou vos réalisations importantes en les faisant défiler en boucle pour attirer l'attention.
- **Messages importants :** utilisez le défilement infini pour partager des annonces importantes ou des messages promotionnels de manière subtile mais percutante.
En ajoutant un défilement infini (infinite marquee) à votre site Webflow, vous pouvez non seulement améliorer l'aspect visuel de votre design, mais aussi attirer l'attention des visiteurs sur des éléments spécifiques que vous souhaitez mettre en avant. Dans la prochaine section, nous explorerons les étapes pour préparer et créer cette fonctionnalité directement dans Webflow.
## **Comment fonctionne l'animation du défilement infini**
Bon, avant de plonger dans les détails de la mise en œuvre, voyons d’abord comment fonctionne l'animation de marquee (défilement infini).
Imaginez **deux listes de logos identiques, côte à côte**, qui prennent chacune au moins une largeur d’écran. Dans leur état initial, l'une sera visible par l’utilisateur, tandis que l'autre sera cachée hors de la vue.
Pour créer l'illusion de défilement, nous allons déplacer ces deux listes avec une animation de mouvement horizontal (CSS transform). **Lorsque les deux listes auront été déplacées de 100% de leur largeur sur la gauche**, la liste initialement cachée aura tout pile pris la place de la liste initialement visible.
À ce moment là, **nous allons alors immédiatement ramener les deux listes dans leur position de départ et reprendre l’animation depuis le début**.
**En répétant cette animation en boucle**, nous obtenons alors un effet de défilement infini, où les logos semblent glisser sans fin d'un côté à l'autre. Cette astuce donne l'apparence d'un flux continu de logos, en utilisant en réalité deux listes statiques seulement.
Dans la section suivante, nous plongerons dans la préparation nécessaire pour mettre en place cette animation dans Webflow.
## **Préparation pour le défilement infini dans Webflow**
Pour créer votre animation de défilement infini de logos, il est essentiel de bien se préparer dans Webflow. Suivez ces étapes pour vous assurer d’obtenir le résultat souhaité :
**1. Regroupez vos assets :**
Commencez par rassembler les logos ou les éléments que vous souhaitez faire défiler. Assurez-vous qu'ils sont tous de tailles similaires pour garantir un défilement fluide et harmonieux.
**2. Créez votre composant :**
Dans la section où vous voulez ajouter votre marquee, ajoutez un Div Block qui servira de conteneur pour l’ensemble du composant. Donnez-lui une classe, par exemple **marquee_component**.
**3. Créez la structure du composant :**
Dans votre composant, créez la structure suivante :
- À l’intérieur du composant, ajoutez un Div Block qui contiendra la première collection et donnez lui une classe, par exemple **marquee_list**.
- À l’intérieur de cette liste, ajoutez ensuite vos assets et donnez leur une classe, par exemple **marquee_logo**.
**4. Créez les styles nécessaire au défilement infini**
- Pour que les deux listes se positionnent l’une à côté de l’autre, appliquez une **Flexbox horizontale** à votre élément **marquee_component**.
- Pour gérer la disposition des logos, appliquez une **Flexbox horizontale** à votre classe **marquee_list**.
- Pour gérer l’espacement des logos, ajoutez à la Flexbox de la classe **marquee_list** le **gap** que vous souhaitez (par exemple, 4rem).
- Pour gérer l’espacement entre le dernier logo d’une liste et le premier logo de la suivante, ajoutez à votre élément **marquee_list** un **padding-right équivalent au gap** de la Flexbox.
- Enfin, pour éviter que les logos ne soit redimensionnés, définissez la propriété Flex Child des éléments **marquee_list** et **marquee_logo** sur « **Don’t shrink or grow** ».
**Important :** gérer l’espacement entre les listes avec le gap de la Flexbox du marquee_component crée un décalage entre la fin et la reprise de la boucle de l’animation : utilisez donc plutôt du padding-right.
**5. Dupliquez la liste :**
Une fois vos assets et vos styles ajoutés, faites simplement une **copie de marquee_list** pour permettre de faire marcher l’animation de défilement infini.
Pour que l’animation fonctionne bien visuellement, **assurez-vous que le composant dans son état final prenne toujours au moins une largeur d’écran**. Si ce n’est pas le cas, dupliquez le une nouvelle fois.
Pour faire le test, appliquez un effet de transformation horizontale de -100% à votre classe marquee_list pour simuler l’état final de l’interaction. Pensez bien à supprimer l’effet de transformation CSS une fois les tests effectués.
**6. (Facultatif) Adaptez la structure pour une collection CMS :**
Si vous souhaitez appliquer cet effet à une collection CMS, voici les ajustements à effectuer :
- Placez la collection à l'intérieur de l'élément marquee_component.
- Donnez la classe marquee_list à l'élément Collection List.
- Placez vos logos (marquee_logo) à l'intérieur de l'élément Collection Item.
- Pour éviter que les logos ne soit redimensionnés, définissez la propriété Flex Child des éléments Collection List Wrapper et Collection Item sur « Don’t shrink or grow ».
- Plutôt que de dupliquer le marquee_list, dupliquez cette fois l’élément Collection List Wrapper pour ajuster la taille du composant.
Maintenant que vous avez préparé la structure, vous êtes prêt à ajouter l'interaction de défilement infini. Dans la prochaine partie, on fait le tour des étapes pour créer cet effet.
## **Création de l'animation d’infinite marquee**
Maintenant que votre structure et vos logos sont prêts, il est temps d'ajouter l'interaction qui permettra à vos logos de défiler indéfiniment.
Il y a plusieurs approches pour réaliser cet effet : l'utilisation des **interactions natives de Webflow**, la création d'une animation équivalente en CSS avec du **code personnalisé**, ou une **troisième option pour des besoins plus avancés**.
### **Option 1 : les interactions natives de Webflow**
Webflow offre un bon moyen pour créer des animations **sans nécessiter de connaissances en codage**. Voici comment vous pouvez mettre en place l'effet de défilement infini en utilisant les interactions natives de Webflow :
**1. Créez l’interaction :**
- Commencez par sélectionner l’élément **marquee_component** et créez une **interaction Element Trigger**.
- Sélectionnez **Scroll into view**, définissez les **Trigger Settings sur la classe** pour que l’animation reste active en cas de copie du composant, **cochez l’option Loop** pour que l’animation se répète indéfiniment puis créez une animation When Scrolled Into View.
**2. Paramétrez le défilement :**
- Dans les actions de l'interaction, sélectionnez votre élément **marquee_list **dans le navigateur et ajoutez une **animation Move** pour le déplacement horizontal.
- Déplacez l’élément **horizontalement jusqu'à -100%** et définissez également une durée.
- Dans les paramètres de l’action, assurez-vous bien que l’élément est **ciblé en fonction de sa classe** afin que l’animation s’applique à toutes les listes.
**3. Bouclez l'animation :**
- **Dupliquez** ensuite cette première action pour créer l’action de retour à l’état initial.
- Redéplacez l’élément **horizontalement à 0%** et définissez cette fois la **durée sur 0 seconde** pour que le retour à l’état de base soit immédiat.
### **Option 2 : le code CSS personnalisé**
Une deuxième option est d’opter pour une approche basée sur CSS en code personnalisé qui aura l’avantage d’être plus légère :
**1. Copiez le code suivant dans le header du code personnalisé :**
``Pensez si besoin à mettre à jour le nom de la classe et à ajuster la durée.
**2. Rendez vous dans le code personnalisé et collez le code dans le header.**
**3. Publiez votre projet et admirez le résultat.**
### **Option 3 : Splide JS**
Une troisième option pour mettre en place le défilement infini dans Webflow est d'utiliser **Splide JS**, une bibliothèque JavaScript légère pour créer des sliders et des défilements interactifs.
Cette option plus complexe offre un **avantage d'évolutivité** si la collection CMS, sur laquelle l'animation est appliquée, est amenée à grandir.
Contrairement aux deux premières options, qui ajustent la vitesse en fonction de la taille des listes (dû à la spécificité de CSS transform), **Splide JS maintient une vitesse constante**, indépendamment de la taille du composant (et ainsi, du nombre d'éléments à l’intérieur). Cette option est donc un **bon choix pour des projets clients qui peuvent être amenés à évoluer** :
**1. Créez la structure requise par Splide JS :**
Splide JS nécessite une structure et une nomination des classes bien précise :
- Créez un conteneur avec une classe **splide** dans lequel ajouter votre collection.
- Donnez à votre Collection List Wrapper une classe **splide__track**.
- Donnez à votre Collection List une classe **splide__list**.
- Donnez à votre Collection Item une classe **splide__slide**.
Dupliquer la collection ne sera pas nécessaire : Splide s’occupe de tout automatiquement.
Si vous souhaitez gérer plusieurs composants Splide JS dans votre projet, **ajoutez une combo class à chacun des éléments requis** avant de leur appliquer des styles spécifiques. Ceci vous permettra de cibler et de styliser chaque composant spécifiquement (du fait que chacun ait sa propre combo class).
**2. Collez le code suivant dans le header de votre code personnalisé :**
`
`**3. Collez le code suivant dans le footer de votre code personnalisé :**
`