Nous utilisons juste ce dont on a besoin pour le fonctionnement du site. Pour plus d'infos lire notre politique de confidentialité.
icon-cookie

Changer la couleur de fond | Webflow animation

Florian Bodelot
Florian Bodelot
May 2, 2022
Aperçu d'une animation sur le BG color dans Webflow avec logo Weflow Tuto

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

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 !

Vous méritez un site Webflow qui fait l'effet " Wahouu " !

Prenez contact avec nous aujourd'hui. L'équipe fantastique de Digidop est prête pour vous aider à construire un site web qui répond à vos besoins 🚀

Site digidop.fr sur un écran d'ordinateur avec un badge de recommandations et des réactions