Comment créer un marquee / ticker tape natif alimenté par le CMS Webflow

Comment créer un scroller / ticker tape natif alimenté par le CMS Webflow

À la fin de l’article, vous trouverez aussi le cloneable du projet que j’ai créé dans la vidéo. Je commence par une excuse pour la vidéo : Milk Moon Studio est un petit studio Webflow, ce qui veut dire que j’en construis beaucoup pour des clients, et que je ne suis probablement pas très bon pour l’expliquer, puisque c’est devenu une seconde nature.

Alors… un ticker tape, scroller ou marquee, que l’on voit souvent sur les sites d’actualités ou les plateformes boursières, est une liste d’éléments qui défile en continu à l’horizontale sur l’écran. Dans Webflow, ce peut être du texte, des images, tout ce que vous pouvez mettre dans le CMS et que vous voulez faire passer d’un côté à l’autre à perpétuité. Notre objectif, dans cet article et dans la vidéo, est de créer un ticker responsive, alimenté par le CMS, qui s’adapte au contenu et garantit une expérience fluide quel que soit le nombre d’éléments. Cette flexibilité est importante pour un contenu dynamique où le nombre d’éléments ou leur largeur peut varier.

Guide pas à pas

Étape 1 : mettre en place la structure

Commençons par esquisser la structure.

1. Section : elle contiendra tout le reste.
2. Scroll Wrapper : il gère le débordement et garantit que seule la partie visible du ticker s’affiche. C’est très important pour tout envelopper proprement et éviter que la page ne déborde de la fenêtre du navigateur.
3. Scroll Track : la piste le long de laquelle les éléments défilent.
4. Collection List Wrapper : nous le dupliquerons pour créer une boucle continue, afin de ne jamais voir la fin des éléments de la collection list avec du vide derrière eux pendant qu’ils traversent l’écran.
5. Collection List : c’est là que vivent nos éléments dynamiques du CMS.
6. Collection List Items : les éléments individuels du ticker.

Nous allons commencer par créer les conteneurs nécessaires, puis mettre en place l’interaction.

Étape 2 : créer la Section et le Scroll Wrapper

1. Ajoutez une Section : ce sera notre conteneur principal.

   Nous partons du principe que nous voulons un ticker pleine largeur, même si ce n’est pas obligatoire et que le cloneable propose les deux. Nous donnons à la section une largeur de 100vw.

2. Ajoutez le Scroll Wrapper à l’intérieur de la section :

   Réglez-le en flex, horizontal et aligné à gauche (le ticker se déplace de droite à gauche sur l’écran), gérez le débordement, donc overflow: hidden, et une largeur de 100%.

Étape 3 : ajouter le Scroll Track et le Collection List Wrapper

1. Ajoutez le Scroll Track à l’intérieur du scroll wrapper :

   Réglez Flex Child Sizing sur : Don’t shrink or grow.
   Réglez-le en Flex, Horizontal, Left Aligned.
   Réglez la largeur sur Auto.

2. Ajoutez le Collection List Wrapper à l’intérieur du scroll track :

   Refaites la même chose :

   Réglez Flex Child Sizing sur : Don’t shrink or grow.
   Réglez-le en Flex, Horizontal, Left Aligned.
   Réglez la largeur sur Auto.

Étape 4 : configurer la Collection List

1. Même chose ici :
   Réglez Flex Child Sizing sur : Don’t shrink or grow.
   Réglez-la en Flex, Horizontal, Left Aligned.
   Réglez la largeur sur Auto.

Tout cela peut sembler un peu redondant, mais ça fonctionne, alors suivez le mouvement.
Vous avez maintenant un ticker tape / scroller prêt à défiler de droite à gauche. 

Étape 5 : styliser les Collection List Items

1. Réglez Flex Child Sizing sur : Don’t shrink or grow.
2. Stylisez-les selon vos besoins, mais veillez à ce que tout ce qui touche à la largeur, à la hauteur ou au padding se fasse dans l’élément lui-même, pas à l’extérieur. Par exemple, n’espacez pas les éléments avec une marge : ajoutez plutôt du padding à l’intérieur de l’élément. Les marges sur les éléments sont faciles à perdre de vue une fois la liste dupliquée et bouclée, alors que le padding à l’intérieur de l’élément garantit que l’« espace » restera toujours uniforme. (Les éléments flex ne fusionnent pas leurs marges comme le font les éléments block : le padding sert donc à garder les choses prévisibles, pas à éviter la fusion des marges.)
3. L’intérêt de construire avec le CMS de cette façon, c’est que vous pouvez styliser l’élément, par exemple lui donner une largeur fixe, et obtenir une belle liste d’éléments uniformes, tous de la même taille, qui défilent sur l’écran. Vous pouvez aussi laisser le contenu du CMS utilisé dans l’élément déterminer la largeur. Une liste de logos, tous de largeurs différentes, chacun dans son propre élément, donnerait un joli défilement de logos, mais les éléments n’ont pas besoin d’avoir la même largeur, contrairement à l’exemple précédent. Nous montrons les deux dans le cloneable, mais cela rend l’ensemble flexible et simple, et cela fonctionne pour du texte, des images, des cours de bourse, ce que vous voulez. Largeurs fixes ou dynamiques sur les éléments.

Si vous voulez aller plus loin sur ce que l’on met dans ces éléments, nos articles sur la création de text spans dans les éléments de texte dynamiques du CMS et sur un pattern CMS en flexbox qui donne une impression de sur-mesure valent le détour.

Étape 6 : dupliquer le Collection List Wrapper

Dupliquez le collection list wrapper pour créer une boucle continue. Notre interaction déplacera la classe Collection List Wrapper de 100% vers la gauche, et si nous n’avons pas deux collection lists qui se déplacent vers la gauche, nous verrons du vide une fois que toute la liste d’éléments aura défilé.

Étape 7 : ajouter l’interaction

NB ! Ces étapes utilisent les interactions Classic de Webflow, celles que nous avons utilisées pour construire ce projet. Interactions with GSAP est désormais le choix par défaut sur les nouveaux sites : si le panneau Interactions vous paraît différent, utilisez le menu déroulant en bas du panneau pour passer en Classic.

1. Allez dans Interactions : dans Webflow, créez une nouvelle interaction Page load. Nous l’utilisons parce que le ticker se trouve tout en haut de notre projet, mais vous pouvez aussi la déclencher au scroll.
2. Déplacez la classe Collection List Wrapper :
   • Déplacez-la à -100% en 60 secondes.
   • Réglez l’easing sur linear.
   • Remettez-la à 0% instantanément une fois le déplacement terminé, sans délai ni durée.
   • Après avoir enregistré, assurez-vous que Loop est coché.

Cela crée l’effet de défilement infini.

Dernières retouches

• Testez et ajustez : prévisualisez votre projet pour vérifier que tout défile en douceur. Ajustez la durée si nécessaire.
• Responsive : assurez-vous que le ticker est responsive en le testant sur différentes tailles d’écran.

Vous avez construit un ticker tape scroller dynamique, alimenté par le CMS, dans Webflow. Cette fonctionnalité peut servir à afficher des titres d’actualité, des cours de bourse, des logos, ou toute autre information que vous voulez faire défiler sur votre site. La clé est de comprendre la structure et les interactions pour obtenir un défilement fluide et responsive. Largeur Auto sur tout ce qui se trouve à l’intérieur du wrapper extérieur, sauf sur la collection list item si vous lui donnez une largeur fixe, et « do not grow or shrink » sur tous les enfants flex.

Foire aux questions

Comment créer un ticker tape ou un marquee dans Webflow ? Construisez un scroll wrapper avec overflow hidden, placez-y un scroll track, puis deux Collection List Wrappers identiques côte à côte, et utilisez une interaction Page load en boucle qui déplace la classe du wrapper de 0% à -100% avec un easing linear. Les étapes ci-dessus détaillent chaque réglage.

Un ticker Webflow peut-il être alimenté par le CMS ? Oui. Comme les éléments proviennent d’une Collection List, vous ajoutez ou retirez des éléments dans le CMS et le ticker s’adapte, qu’il s’agisse de texte, de logos ou de cours de bourse, avec des largeurs fixes ou dynamiques.

Pourquoi dois-je dupliquer le Collection List Wrapper ? L’interaction déplace la classe Collection List Wrapper de 100% vers la gauche : sans seconde copie juste derrière, vous verriez du vide jusqu’à la réinitialisation de la boucle. Le doublon comble cet espace et donne au ticker l’air sans fin.

Vous pouvez récupérer le cloneable ici, et poser vos questions en commentaire s’il vous en reste après avoir regardé le projet et la vidéo. Je laisse aussi un lien vers le cloneable de ticker original dont je parle dans la vidéo et qui m’a donné envie de construire celui-ci. C’est aussi un bon exemple. Vous cherchez une autre astuce CMS ? Essayez la pagination fluide. Enfin, n’oubliez pas de consulter nos autres tutoriels et cloneables.