Logos des clients, pages légales, commentaires, portfolio... Le bandeau infini qui défile tout seul sur le site donne un aspect design et dynamique à votre site ✨ Flow Agency vous explique comment le mettre en place et le maintenir dans le temps pour ajouter des éléments 😁
Pour pouvoir créer cette animation, vous aurez besoin d'avoir accès au designer Webflow du site, rien de plus ! 😉
Sur votre designer, les blocs du bandeau devraient ressemblerer à ceci :
Commençons par disséquer la structure du bloc. Il se compose de :
Durant la procédure, vous verrez parfois "bloc 1", "bloc 2" ou "bloc 3" entre parenthèses suite à une référence à un des blocks : cela fait référence à la liste détaillée si dessus ! 😎 En cas de doute, n'hésitez pas à venir vérifier ✨
Commencez donc par créer votre bloc avec tout les éléments à faire défiler, que ce soit des images, des textes, peu importe ! Mettez le tout dans votre div block (bloc 1). Si besoin n'hésitez pas mettre le tout dans des sous blocs 😉 A vous de constituer votre bandeau "statique" dans un premier temps.
Si vous avez des éléments qui doivent sortir de l'écran, utiliser le layout "flex" et la contrainte "don't wrap" pour qu'ils restent bien tous sur une seule ligne !
Une fois que celui-ci est finalisé, placez le (bloc 1) dans le wrap (bloc 3) puis dupliquez le de manière à obtenir la structure précédement présentée (vous venez de créer votre bloc 2 🤓).
Vous obtiendrez probablement quelque chose qui ressemble à ça, soit votre bandeau, en double, avec tous les éléments les un en dessous des autres !
Pour régler ce soucis, il suffit de modifier le layout de votre wrap (bloc 3) pour qu'ils soit en flex, et ajouter la contrainte "don't wrap".
Vous devriez maintenant avoir un seul bandeau visible sur votre écran !
Un autre petit élément important concernant la bon fonctionnement de votre bandeau est l'overflow. Il s'agit d'une fonctionnalité permettant de voir, ou non, ce qui dépasse d'un bloc. Dans notre cas, sur le bandeau final, nous ne voudrons pas que ce soit visible, il faudra donc le mettre sur "hidden" :
Cependant, pendant le développement, vous pouvez avoir envie de voir tous vos éléments 😉 Pour se faire, activez l'overflow. Vous aurez alors une scrollbar horizontale qui vous permettra de voir la totalité des éléments de vos bloc 1 et 2.
Tips de nos experts:
L'overflow peut être paramétré sur différents blocs en fonction de comment est architecturé votre site.
Il vous faudra peut-être le désactiver à plusieurs endroit pour que vous puissez bien tout voir 😊. Pas de panique si ça ne marche pas de suite ! Remontez les différents blocs (sections, div ou containers) dans lesquels se trouvent votre bandeau jusqu'à les avoir tous fait (et notez ce que vous modifiez pour être capable de tout remettre comme avant au besoin !)
C'est le moment où tout va enfin prendre forme ! Selectionnez le wrap (bloc 3) qui contient les deux listes d'éléments (bloc 1 et 2) et rendez-vous dans l'onglet "interactions" du designer. Dans la section "element triger", ajouter une nouvelle interaction "Scroll into view":
Pour la section "When scrolled out of view", vous pouvez laisser vide. Nous allons simplement créer une animation pour "When scrolled into view". Selectionnez "Start an animation" et créer une nouvelle animation. 💃 Donnez lui un petit nom sympa et c'est parti !
L'animation se déroule en 3 étapes🤓 :
Pour le mise en place de l'animation, suivez la fonction qui correspond au sens dans lequel vous souhaitez déplacer le bandeau :
Et tadaaaaa ! C'est terminé 😉
Et voilà ! C'est fini 😉
Que ce soit pour ajouter ou supprimer des élements, modifier l'ordre, ou tout autre manipulation, il est important de savoir comment faire !
Si vous avez créer le bandeau, vous avez problablement une idée de ce qu'il va falloir faire. Si vous voulez "juste" modifier votre bloc, aller quand même lire la première section ! Elle vous explique comment il fonctionne et cela vous permettra de le modifier facilement 😉
Je vous laisse vous référez à la première section pour voir les détails de la strucutre 👆
La première étape va être de faire votre modification dans le premier bloc (en orange sur la photo), puis soit de la faire aussi dans le deuxième bloc (en vert sur la photo) (vous pouvez aussi simplement faire un copier coller, si vous avez fait beaucoup de modification par exemple). Le plus important est que votre modification soit effectuée sur les deux blocs car ils doivent être identiques pour que l'effet fonctionne parfaitement.
Une fois que vos deux blocs sont bien identifiques, vous devez trouvez la valeur pour laquelle vos blocs effectue une rotation complète : c'est à dire que vous ne voyez pas la différence entre le fait que le bloc soit avancé (ou reculé) de cette valeur et la position initiale. Une fois que vous avez cette valeur, vous pouvez la modifier dans l'interaction du bloc ! Et c'est tout 😊
Vous pourriez ne pas faire cette dernière étape, mais vous risqueriez d'observer des sauts dans votre animation, et certains éléments ne s'afficherait peut-être jamais, en fonction de la taille de vos éléments. 😢
Logos des clients, pages légales, commentaires, portfolio... Le bandeau infini qui défile tout seul sur le site donne un aspect design et dynamique à votre site ✨ Flow Agency vous explique comment le mettre en place et le maintenir dans le temps pour ajouter des éléments 😁