Cet effet permet de modifier la couleur de fond du <body> lorsque l’utilisateur arrive sur différentes sections d’une page — parfait pour créer un storytelling fluide et immersif.
Ajouter les classes et attributs dans Elementor
Étape 1 : Ajouter la classe .panel
Pour chaque section où tu veux changer la couleur de fond, ainsi que celles qui la précèdent et la suivent :
- Sélectionne ta section dans Elementor
- Va dans Avancé → Classes CSS
- Ajoute :
panel
Étape 2 : Définir la couleur via un attribut
Toujours dans ta section :
- Va dans Avancé → Attributs
- Ajoute un nouvel attribut : Clé :
data-colorValeur :grayoublueoupurple
Exemple :
data-color|blueappliquera la classe.color-blueau body quand la section est visible.
Ajouter les styles de couleurs dans ton site
Va dans Apparence → Personnaliser → CSS Additionnel, ou dans Elementor → Code personnalisé → CSS global.
Ajoute ce code :
body {
background-color: #101012;
transition: background-color 1s ease;
}
.color-blue {
background-color: #7dc4ea!important;
}
.color-gray {
background-color: #222225!important;
}
.color-purple {
background-color: #7300FF!important;
}
Tu peux créer autant de couleurs que tu veux :
Déclare une .color-xxx puis utilise data-color|xxx dans ta section.
Ajouter le script jQuery dans Elementor
- Va dans Elementor → Code personnalisé
- Clique sur Ajouter un code
- Choisis position Footer – Fin du
</body> - Colle ce code :
<script>
jQuery(function($){
$(window).scroll(function() {
var $window = $(window),
$body = $('body'),
$panel = $('.panel'); // Chaque section à détecter
var scroll = $window.scrollTop() + ($window.height() / 2);
$panel.each(function () {
var $this = $(this);
// Vérifie si la section est au milieu de l'écran
if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
// Supprime toutes les classes color-*
$body.removeClass(function (index, css) {
return (css.match(/(^|\s)color-\S+/g) || []).join(' ');
});
// Ajoute la couleur liée à la section active
$body.addClass('color-' + $(this).data('color'));
}
});
}).scroll(); // Exécute au chargement
});
</script>Comment cela fonctionne ?
- Chaque section avec
.panelest surveillée. - Quand le scroll arrive au milieu de cette section, le script :
- retire toutes les classes actuelles
color-*du body - ajoute
color-gray,color-purple, etc.
- retire toutes les classes actuelles
- Le CSS change alors la couleur du background du site.
Grâce à la transition :
transition: background-color 1s ease;
La couleur change en douceur, façon storytelling.
Astuces & Personnalisation
Ajouter plus de couleurs
Déclare une nouvelle classe :
.color-green {
background-color: #1abc9c!important;
}
Puis dans Elementor :
data-color|green
Rendre le changement plus rapide ou plus lent
Modifie dans body :
transition: background-color 0.4s ease;
Changer la zone de détection (milieu de section)
Dans le JS :
var scroll = $window.scrollTop() + ($window.height() / 2);
Remplace / 2 par :
/ 3→ déclenche plus tôt/ 1.5→ déclenche plus tard
Créer avec Elementor
