Comment créer un défilement infini (infinite marquee) de logos dans Webflow

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, 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 :

1. 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é.
2. 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.
3. 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é :

<style>

/* Paramètre l'animation de défilement infini */
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}

/* Donne l'animation à l'élément marquee_list */
.marquee_list {
  animation: marquee 12s linear infinite;
}

</style>

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é :

<!--- Splide JS styles --->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/splidejs/4.1.4/css/splide-core.min.css" integrity="sha512-cSogJ0h5p3lhb//GYQRKsQAiwRku2tKOw/Rgvba47vg0+iOFrQ94iQbmAvRPF5+qkF8+gT7XBct233jFg1cBaQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

3. Collez le code suivant dans le footer de votre code personnalisé :

<!--- Importer Splide JS --->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.4/dist/js/splide.min.js"></script>
<!--- Importer Splide JS Autoscroll--->
<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide-extension-auto-scroll@0.5.3/dist/js/splide-extension-auto-scroll.min.js"></script>

<!--- Installer Splide JS --->
<script>

// Composant de la section de logos

		// Crée une fonction spécifique au composant ciblé
    function splideLogos() { 
    // Cible le composant grâce à ses classes 
		// Ici, le composant avec une classe "splide" et une combo-class "is-logos"
		let splides = $('.splide.is-logos'); 
    for ( let i = 0, splideLength = splides.length; i < splideLength; i++ ) {
				// Ouvre les paramètres du composant
        new Splide( splides[ i ], {
            type: 'loop', // permet au composant de défiler en boucle
            gap: '4rem', // définit le gap entre chaque item
            autoWidth: true, // permet à chaque item de conserver sa taille définie dans Webflow
            arrows: false, // masque les flêches
            pagination: false, // masque la pagination
            drag: false, // empêche l'utilisateur de drag le composant
            autoScroll: { 
            		autoStart: true, // initialise le défilement automatique
                speed: 0.75, // définit la vitesse du défilement automatique
            },            
            breakpoints: {
                768: { // définit des options spécifiques aux tailles d'écran inférieures à 768px
                    gap: '2rem',
                },
            }
    		} ).mount( window.splide.Extensions );
    }}
    splideLogos(); // 

</script>

Modifiez si besoin les paramètres et pensez à faire correspondre les classes du code avec les classes effectivement présentes sur votre projet Webflow.

Notez que le gap entre les éléments peut être géré directement dans les paramètres Splide JS, il n’est donc pas nécessaire dans les styles Webflow.

4. Publiez et testez :

Publiez maintenant votre projet et testez le défilement infini, vous devriez voir vos logos défiler en boucle de manière fluide et dynamique.

L'approche utilisant Splide JS offre plusieurs avantages, notamment pour les collections CMS, car le défilement s'ajuste automatiquement au nombre d'éléments ajoutés par le client.

Résumé des options

En choisissant entre ces trois options, vous pouvez donc créer un effet de défilement infini selon l’approche qui vous correspond le mieux :

1. Le panneau d’interaction, plus accessible.
2. Le code CSS personnalisé, plus léger et performant.
3. L’installation Splide JS, plus évolutive et avancée.

Notre avis ?

• Pour un projet simple et statique, un gain de performance vaut bien quelques petites lignes de code.
• Pour un projet client plus avancé et amené à évoluer, Splide JS peut être une bonne option, même si plus complexe.

Dans tous les cas, cette fonctionnalité vous permettra d’ajouter une touche de dynamisme à votre site en mettant en valeur vos logos.

Conclusion

En conclusion, l'ajout d'un défilement infini de logos à votre site Webflow est un bon moyen d’enrichir l'expérience de vos visiteurs en attirant leur attention sur des éléments clés de manière dynamique.

Dans cet article, nous avons exploré trois approches distinctes pour réaliser cet effet, chacune présentant ses propres avantages en fonction de vos besoins spécifiques :

• L'utilisation des interactions natives de Webflow offre une solution accessible, idéale pour les projets plus simples où la manipulation de code est limitée.
• Le code CSS personnalisé, quant à lui, propose une option légère et performante pour contrôler le défilement infini, tout en conservant une optimisation maximale.
• Pour des besoins plus avancés, Splide JS permet de maintenir une vitesse constante, indépendamment du nombre d'éléments, ce qui en fait un choix particulièrement évolutif pour les projets avec des collections CMS en constante évolution.

Finalement, le choix entre ces trois options dépendra de la complexité de votre projet, de vos compétences en codage et de vos préférences en matière de performances. Que vous optiez pour la simplicité des interactions natives, la légèreté du CSS personnalisé ou la flexibilité de Splide JS, l'ajout d'un défilement infini de logos injectera une bonne dose de dynamisme et d'attrait visuel à votre site Webflow, contribuant ainsi à une expérience utilisateur mémorable et engageante.

Pour aller plus loin, vous pouvez :

• aller lire notre article sur : Comparaison entre CSS et JavaScript pour créer des animations Webflow
• aller lire notre article sur : Slater, l'outil ultime pour allier Webflow & Javascript
• aller voir la vidéo de Finsweet sur : Looping carousel of logos in Webflow using Splide JS