Créer un site pro et animé, sans coder

Ce que tu construis dans ce cours Webflow

Le cours démarre sur un site vierge et monte une landing page animée : une hero dont les templates s'ouvrent en éventail au scroll, une navigation fixe, un bandeau de logos qui défile, une section de chiffres et une section process qui se remplit. Une règle tient du début à la fin : chaque élément reçoit une classe explicite, jamais une classe générée par Webflow.

Structurer et styliser une hero section sur Webflow

La section prend une hauteur minimale de 100 VH et 32 pixels de padding latéral posés dès le desktop, pour que le texte ne colle pas aux bords en mobile. Le bloc de contenu reçoit une largeur maximale, une marge auto de chaque côté et une largeur de 100 %, sans laquelle la marge auto reste sans effet.

Styliser par les tags, pas élément par élément

• La taille du titre se règle sur le sélecteur de tag HTML : tous les H1 du site suivent.
• La taille de texte de base se pose sur le body, pas paragraphe par paragraphe.
• Paragraphe et text block ne se valent pas : la balise P pèse dans le référencement, le bloc de texte générique non.

Le bouton et le titre en dégradé

Le bouton combine un dégradé linéaire, un border radius très élevé pour l'effet pilule et une ombre décalée de 6 et 6 sans flou. Au survol l'ombre disparaît pendant que le bouton se déplace de 6 et 6 : il donne l'impression d'entrer dans la page. Pour le dégradé dans le titre, la couleur de texte ne suffit pas : on isole les mots dans un span, on y pose le même dégradé en fond et on active le clipping background to text.

Animer au scroll avec les interactions Webflow

Les deux grosses animations reposent sur le même montage.

1. La course de scroll. Une div haute donne la distance à parcourir.
2. Le sticky. Une div sticky à l'intérieur garde le contenu à l'écran pendant toute la course.
3. L'interaction. Un déclencheur while scrolling in view, et la timeline se joue au fil du défilement.

L'éventail de templates

La div de scroll monte à 250 VH, le sticky se cale à 20 VH pour rester centré quelle que soit la hauteur de fenêtre. Les images passent en absolute sauf une, laissée en relative avec un z-index élevé : c'est elle qui conserve la hauteur de la div. Chaque image porte une classe combinée numérotée pour être animée séparément, et leur point d'origine passe sur le haut, sinon le scale déborde sur le contenu.

La barre de progression de la section process

Même montage : 200 VH de course, un sticky de 100 VH centré. La barre est une div de remplissage en absolute posée dans un tracker en relative, origine à gauche pour partir du bon côté. Quatre cartes, donc quatre paliers de 25 % : les fonds d'icône passent de 0 à 100 % d'opacité, les textes de 25 à 100 %.

La barre s'anime en scale et non en largeur, et c'est le point à retenir.

Mouvement, rotation, scale et opacité ne demandent aucun recalcul en arrière-plan, contrairement à une largeur animée.

Créer une navigation Webflow animée

La navbar native sert de base, mais son container est remplacé par une div standard et ses liens par des link blocks, plus souples. L'effet de survol où le texte se remplace ne demande pas de dupliquer le texte : une ombre sans flou, opaque, décalée de 1,1 em vers le bas fait office de second libellé. Le conteneur passe en overflow hidden et une interaction mouse hover déplace le texte de 100 % sur l'axe Y. L'animation s'applique sur la classe, et se désactive en tactile : sans souris, pas de survol.

Défilement de logos et compteur de chiffres

Le bandeau de logos est monté à la main : conteneur en flexbox aligné à gauche, logos dupliqués une fois, overflow hidden sur le parent pour éviter un scroll horizontal, et deux div en absolute portant un dégradé vers l'opacité zéro pour le fondu des bords.

L'animation utilise le déclencheur page load : un mouvement de 0 à -50 % en 15 secondes, un retour instantané à 0 %, et l'option loop. En mobile la même durée paraît plus lente puisque la distance est plus courte, donc l'animation est raccourcie. Les compteurs de chiffres passent par Finsweet Attributes.

Adapter le design et les animations au responsive

• Les trois cartes en grid deviennent un flexbox en wrap à 47 %, plus harmonieux que deux colonnes qui laissent un orphelin.
• Les templates des extrémités passent en display none dès la tablette.
• Les largeurs d'images sont en pourcentage avec une largeur minimale en pixels, jamais fixes.
• Les animations sont dupliquées et activées breakpoint par breakpoint pour réduire scale et déplacements.

Un avertissement revient : l'éditeur n'a pas les proportions d'un vrai téléphone, il faut publier en staging et regarder en live.

Conclusion

Une méthode qui dépasse cette page : nommer avant de styliser, styliser par les tags et les classes, n'animer que ce qui ne coûte rien au navigateur.