BACKGROUND COLOR CHANGE ON PAGE SCROLL - Elementor
Transform your website’s appearance dynamically with the ‘Background Color Change on Page Scroll’ feature in Elementor. Enhance user experience and captivate visitors as they navigate your site, immersing them in a seamless visual journey.
BACKGROUND COLOR CHANGE ON PAGE SCROLL - Elementor
HTML
<script>jQuery(function($){
$(window).scroll(function() {
var $window = $(window),
$body = $('body'),
$panel = $('.panel'); // change this with your own class
var scroll = $window.scrollTop() + ($window.height() / 2);
$panel.each(function () {
var $this = $(this);
if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
$body.removeClass(function (index, css) {
return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
});
$body.removeClass(function (index, css) {
return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
});
$body.addClass('color-' + $(this).data('color'));
}
});
}).scroll();
});</script>
CSS
.body {
background-color: #000000;
transition: background-color is ease;
}
.color-copper {
background-color: #c1532f !important;
}
.color-redi {
background-color: #f1532f !important;
}
.color-bu {
background-color: #F0ABFC !important;
}
.color-ye {
background-color: #FFEA8D !important;
}