Changer la couleur de fond | Webflow animation

Tutoriel
May 2, 2022
3 min
Aperçu d'une animation sur le BG color dans Webflow avec logo Weflow Tuto
Résumez cet article avec une IA
Points clés de l'article

Dans ce tutoriel Webflow (facile et rapide) vous allez apprendre à créer une animation : changer la couleur de l'arrière-plan d'une section au scroll. Sans code.

Pour réaliser ce tutoriel vous allez avoir besoin de :

  • Un projet webflow avec accès au mode designer

Le tutoriel par étape

Tutoriel vidéo.. 🍿🎬

1 - Créer votre section

2 - Ajouter vos propriétés de style CSS

Pour le tutoriel, nous allons créer une classe nommée section-animation avec une couleur d'arrière plan (couleur de fond ou background color en anglais). Cette couleur changera lorsque nous arriverons dans cette section.

Section dans Webflow
Section-animation

3 - Créer l'animation

1. Sélectionner la section à animer

2. Créer une interaction "while scroling in view"

Animation de style CSS "BG color" dans Webflow
Séléction de "While scrolling in view"

3. Ajouter plusieurs valeurs BG color sur l'élément section

Animation de style CSS "BG color" dansWebflow
Séléction d'une animation du "BG color"

4. Modifier la valeur BG color en fonction du % de scroll dans la section avec le %keyframe

Background color change animation inside Webflow
Zoom sur les 4 configurations différentes

{{custom-blog-cta}}

4 - Tester l'animation dans l'outil de création

Tester l'animation grâce à la fonctionnalité "live preview".

🎁 Cette fonctionnalité vous permet de bien régler le %keyframe de votre animation pour qu'elle soit parfaitement synchronisée.

Live preview animation dans Webflow
Live preview animation dans Webflow

Et voilà, vous savez maintenant comment animé la couleur de fond d'une section de votre site web dans Webflow.

Si vous souhaitez en savoir plus sur Webflow, n'hésitez pas à souscrire à la chaîne youtube de Digidop (nouvelle vidéo chaque semaine) ou bien suivre notre blog avec des articles sur Webflow et le no-code !

Bonus : Découvrez comment appliquer un effet glassmorphism sur Webflow !

Formation Webflow Gratuite
Commencer la formation
Florian Bodelot
Florian Bodelot
Co-fondateur

Articles qui devraient vous intéresser

A woman speaks on stage at a conference, wearing a headset microphone. Behind her, a large black screen displays the question “What then?” in bold white text.
Evénements
Webflow

Digidop participe à la FLOWconf 2025, le plus grand événement Webflow & marketing d’Europe.

Digidop participe à la FLOWconf 2025, le plus grand événement Webflow & marketing d’Europe.
Aperçu visuel de plusieurs typographies modernes utilisées sur le web en 2025, chacune présentée sur une image de fond inspirante : Editorial New, DM Serif Display, Aeonik, SF Pro Rounded, Rader, Champ, Monument, Canicule, Clash Display, Supply, Agrandir, et d’autres — une composition graphique mettant en avant la diversité typographique.
Documentation
Design

Les 20 meilleures typographies pour un site web moderne et impactant en 2025

Les 20 meilleures typographies pour un site web moderne et impactant en 2025
Mosaic of homepage designs from several Webflow agencies (Digidop, N4, Refokus, Flow Ninja, Tonik, Finsweet, Edgar Allan), showcasing diverse creative approaches and visual identities centered around the Webflow logo.
Storytelling
Webflow

Mon top 7 des meilleures agences Webflow en 2025 (avis d’un fondateur d’agence)

Mon top 7 des meilleures agences Webflow en 2025 (avis d’un fondateur d’agence)

Transformez votre site web en un moteur de croissance.

Nous contacter