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

Conférence AI Tech Summit 2025 avec un conférencier sur scène devant un large public, entouré de grands écrans diffusant « AI » et « Tech Summit 2025 ». (Génération par IA)
Evénements

Calendrier 2025 des événements Web, Design, IA à ne pas manquer pour la rentrée

Calendrier 2025 des événements Web, Design, IA à ne pas manquer pour la rentrée
Capture d'écran de la page d'accueil de la recherche Google avec la barre de recherche et le logo Google.
Documentation
SEO

3 outils pour suivre vos positions SEO dans la SERP

3 outils pour suivre vos positions SEO dans la SERP
ChatGPT 5.0 OpenAI
News
IA

ChatGPT-5 vs ChatGPT-4 vs Claude Opus 4.1 : Le comparatif IA ultime 2025

ChatGPT-5 vs ChatGPT-4 vs Claude Opus 4.1 : Le comparatif IA ultime 2025

Transformez votre site web en un moteur de croissance.

Nous contacter