Comment créer un scroller/Ticker Tape alimenté par un CMS Webflow natif

Comment créer un scroller/Ticker Tape alimenté par un CMS Webflow natif

À la fin de l'article, vous trouverez également le clonable du projet que j'ai créé dans la vidéo. Je vais commencer par une excuse pour la vidéo, Milk Moon Studio n'est qu'un petit studio Webflow, ce qui signifie que j'en crée beaucoup pour les clients, ce qui signifie que je ne suis probablement pas douée pour expliquer cela car c'est une seconde nature maintenant.

Donc... un ticker tape ou un scroller, que l'on voit souvent sur les sites d'actualités ou les plateformes boursières, est une liste d'éléments défilant en continu et se déplaçant horizontalement sur l'écran. Dans Webflow, il peut s'agir de texte, d'images, de tout ce que vous pouvez coller dans le CMS et que vous souhaitez déplacer d'un côté à l'autre à perpétuité. Notre objectif dans cet article et cette vidéo est de créer un ticker réactif, alimenté par un CMS, qui s'adapte en fonction du contenu, garantissant une expérience fluide quel que soit le nombre d'éléments. Cette flexibilité est cruciale pour le contenu dynamique où le nombre d'éléments ou la largeur des éléments peuvent varier.

Guide étape par étape

Étape 1 : Configuration de la structure

Tout d'abord, décrivons la structure.

1. Rubrique: Cela contiendra tout.
2. Scroll Wrapper: Cela permettra de gérer le débordement et de garantir que seule la partie visible du ticker est affichée. Il est très important de bien tout emballer et d'éviter que la page ne déborde dans la fenêtre du navigateur.
3. Piste de défilement: la piste le long de laquelle les éléments vont défiler.
4. Emballage de liste de collection: Nous allons dupliquer cela pour créer une boucle continue, afin que nous ne voyions pas la fin de la liste des éléments de la collection avec un espace blanc derrière eux lorsque nous les déplaçons sur l'écran.
5. Liste des collections: C'est là que se trouvent nos éléments CMS dynamiques.
6. Articles de la liste de collection: articles individuels dans le ticker.

Nous allons commencer par créer les conteneurs nécessaires, puis configurer l'interaction.

Étape 2 : Création de la section et de l'enveloppe de défilement

1. Ajouter une section: Ce sera notre conteneur principal.

   Nous allons commencer par supposer que nous voulons créer un ticker pleine largeur, bien que ce ne soit pas nécessairement le cas et que le clonable possède les deux. Nous allons créer la section 100vw.

2. Ajouter le Scroll Wrapper à l'intérieur de la section :

   Faites-le flexible, horizontal, aligné à gauche. (nous déplaçons le ticker de droite à gauche sur l'écran) et gérons le débordement, donc débordement : masqué et largeur 100 %.

Étape 3 : Ajout de la piste de défilement et de l'emballage de la liste de collection

1. Ajouter la piste de défilement à l'intérieur de l'emballage du rouleau :

   Réglez Flex Child Sizing sur : Ne pas rétrécir ni agrandir.
   Rendez-le flexible, horizontal, aligné à gauche.
   Réglez la largeur automatiquement.

2. Ajouter l'emballage de la liste des collections à l'intérieur de la piste de défilement :

   Répète la même chose :

   Réglez Flex Child Sizing sur : Ne pas rétrécir ni agrandir.
   Rendez-le flexible, horizontal, aligné à gauche.
   Réglez la largeur automatiquement.

Étape 4 : Configuration de la liste des collections

1. Même chose ici :
   Réglez Flex Child Sizing sur : Ne pas rétrécir ni agrandir.
   Rendez-le flexible, horizontal, aligné à gauche.
   Réglez la largeur automatiquement.

Tout cela peut sembler un peu redondant, mais cela fonctionne, alors allez-y.
Vous êtes maintenant assuré que le ticker tape/scroller est configuré et prêt à voyager de droite à gauche.

Étape 5 : Styliser les éléments de la liste de collection

1. Réglez Flex Child Sizing sur : Ne pas rétrécir ni agrandir.
2. Stylisez-les selon vos besoins, mais assurez-vous que tout style concernant la largeur, la hauteur ou le rembourrage se fasse à l'intérieur ou sur eux, et non à l'extérieur. Par exemple, nous ne voulons pas que vous définissiez l'écart entre les éléments en ajoutant une marge, mais en ajoutant du rembourrage à l'intérieur de l'élément. La marge peut entraîner un effondrement de la marge lorsque deux marges de différents éléments se pressant l'une contre l'autre s'effondrent. L'utilisation d'un rembourrage à l'intérieur de l'élément garantit que l' « écart » restera toujours uniforme.
3. L'avantage de la création à l'aide du CMS est que vous pouvez styliser l'élément, par exemple en lui donnant une largeur fixe et vous aurez une liste de jolis articles uniformes de la même taille, qui défileront sur l'écran, ou vous pouvez demander au contenu du CMS utilisé à l'intérieur de l'article de déterminer la largeur. Une liste de logos, tous de largeurs différentes, chacun dans son propre élément, créerait une belle liste de logos défilants, mais les éléments ne doivent pas nécessairement avoir la même largeur dans cet exemple que dans le précédent. Nous montrons les deux dans le clonable, mais cela le rend flexible, simple et cela signifie qu'il fonctionne pour le texte, les images, les cours des actions, etc. Largeurs fixes ou dynamiques sur les articles.

Étape 6 : Dupliquer le wrapper de la liste de collection

Dupliquez le wrapper de la liste de collection pour créer une boucle fluide. Notre interaction déplacera la classe Collection List Wrapper de 100 % vers la gauche, et si deux listes de collections ne se déplacent pas vers la gauche, des espaces apparaîtront une fois la liste complète des éléments déplacée vers la gauche.

Étape 7 : Ajouter l'interaction

1. Accédez à Interactions: Dans Webflow, créez une nouvelle interaction de chargement de page, nous l'utilisons car elle se trouve juste en haut de notre projet, mais vous pouvez également la déclencher lors du défilement.
2. Déplacer la classe Collection List Wrapper:
   • Passez à -100 % en 60 secondes.
   • Réglez l'assouplissement sur linéaire.
   • Réinitialisez à 0 % instantanément après avoir terminé le mouvement, sans délai ni durée.
   • Après avoir enregistré, assurez-vous que Loop est coché.

Cela créera un effet de défilement infini.

Touches finales

• Testez et ajustez: prévisualisez votre projet pour vous assurer que tout défile correctement. Ajustez le timing si nécessaire.
• Réactivité: Assurez-vous que le ticker est réactif en le testant sur différentes tailles d'écran.

Vous avez créé un outil de défilement dynamique basé sur le CMS dans Webflow. Cette fonctionnalité peut être utilisée pour afficher les titres des actualités, les cours des actions, les logos ou toute autre information que vous souhaitez faire défiler sur votre site Web. L'essentiel est de comprendre la structure et les interactions pour garantir un défilement fluide et réactif. Largeur automatique de tout ce qui se trouve à l'intérieur de l'emballage extérieur, à l'exception de l'élément de la liste de collection, si vous avez une largeur fixe dessus, et ne l'augmentez pas ou ne diminuez pas sur tous les enfants flexibles.

Tu peux récupérez le clonable ici, et posez vos questions dans les commentaires si vous les avez toujours après avoir consulté le projet et vidéo. Je laisserai également un lien vers le ticker original clonable J'en parle dans la vidéo qui m'a incité à construire celui-ci. C'est également un bon exemple. Enfin, n'oubliez pas de vérifier nos autres tutoriels et clonables.