Créer une animation "Sticky on Scroll" dans Webflow - Tutoriel pour débutants 

Créer une animation d'autocollant sur le défilement

En tant que développeur indépendant, je suis souvent confronté à des défis de conception qui m'obligent à faire preuve de créativité. Récemment, j'ai été chargé de créer une animation sticky on scroll pour le site Web d'un client. Dans cet article de blog, j'expliquerai les étapes que j'ai suivies pour créer cet effet et je fournirai le code nécessaire pour le reproduire sur ton propre site Web.

Apprenons donc à créer une animation autocollante sur le défilement à l'aide de Webflow. Tu vas découvrir :

👉 Raccourcis Webflow
👉 Éléments collants
👉 Animations de défilement dans Webflow

Astuce: pour créer un élément collant, tu ne peux pas définir l'élément parent en débordement caché !
Cela a toujours été un peu déroutant pour moi, mais c'est pourquoi j'ai tendance à utiliser plus de Divs pour m'aider.

Prépare la section collante

Nous allons construire une section à deux colonnes afin d'avoir une colonne qui défile tandis que l'autre reste collée.
C'est très utile si tu veux mettre l'accent, donner une vue d'ensemble ou peut-être montrer une image pendant que l'utilisateur fait défiler le texte.

Pour créer une animation sticky on scroll, la première étape consiste à mettre en place la structure HTML. Une fois la structure en place, tu peux utiliser CSS et JavaScript pour créer la mise en page et les effets d'animation souhaités OU tu le fais avec Webflow :).

Dans mon cas, j'ai utilisé Webflow et un wrapper de grille dans le wrapper de page pour m'aider à organiser les éléments sur la page, puis j'ai ajouté un wrapper et placé des images à l'intérieur. J'ai stylisé les images à l'aide de CSS pour créer un effet de pile, puis j'ai utilisé le déclencheur d'interaction de Webflow pour suivre la position de défilement de l'utilisateur et appliquer une classe collante à l'enveloppe lorsque l'utilisateur fait défiler la page au-delà d'un certain point. Ainsi, l'enveloppe et son contenu restent collés en haut de l'écran tandis que le reste de la page continue de défiler.

C'est une section vraiment facile à créer qui a un grand impact sur l'UX - à la fois positif et négatif. Alors n'abuse pas des sections collantes dans Webflow et assure-toi de toujours avoir l'utilisateur à l'esprit lorsque tu construis tes sites Web.

Dans l'ensemble, la création d'une animation sticky on scroll implique une combinaison de HTML, CSS et JavaScript si tu le fais à partir de zéro. En suivant les étapes décrites dans cette vidéo, tu pourras créer un effet similaire pour ton propre site Web en utilisant uniquement Webflow.

Si tu ne l'as pas encore fait, assure-toi de t'abonner à ma newsletter et de recevoir du contenu de qualité directement dans ta boîte de réception. Tu recevras également 15 clonables gratuits pour Webflow que tu pourras copier et coller dans ton prochain projet !


⏲️ Timestamps
00:00 - Intro
00:22 - Vue d'ensemble
00:48 - Mise en place de la structure de la page
10:27 - Construction de l'animation de défilement
17:39 - Résultat