Smooth Background Color Change on Scroll in Elementor

 

 

Smooth Background Code 1 (Head):

<style>
	body{
		opacity: 0;
	}
</style>

 

Smooth Background Code 2 (Body – End):

<script>

var $ = jQuery,
		selector = '[data-elementor-type="wp-page"] > .elementor-element, [data-elementor-type="header"] > .elementor-element, [data-elementor-type="footer"] > .elementor-element'

$(window).on('load', function(){

$(selector + ', .sb-color > .elementor-element').each(function(){
	var color
	
	if($(this).css('background-color') != 'rgba(0, 0, 0, 0)'){
		color = $(this).css('background-color')
	}else{
		color = $('body').css('background-color')
	}

	$(this).attr('data-color', color)
	$(this).css('background-color', 'rgba(0, 0, 0, 0)')
})

setTimeout(function(){
	$('body').addClass('loading')
}, 200)
setTimeout(function(){
	$('body').addClass('loaded')
}, 300)
})

var changing = false

function encodeClass(color){
	console.log(color)
	return color.replace(/, /g, '-').replace('(', 'c').replace('.', 'd').replace(')', 'e')
}
function decodeClass(className){
	return className.replace(/-/g, ', ').replace('c', '(').replace('d', '.').replace('e', ')')
}

$(window).on('load scroll resize', function(){
	
changing = true
	
var lastVisible = $('[data-elementor-type="wp-page"] > .elementor-element').eq(0),
		bottomOffset = 200,
		startFrom = 200

if( $(window).width() < 768 ){
	bottomOffset = 100
}
	
$(selector).each(function(){
	
		var top_of_element = $(this).offset().top,
		bottom_of_element = $(this).offset().top + $(this).outerHeight(),
		bottom_of_screen = $(window).scrollTop() + $(window).innerHeight(),
		top_of_screen = $(window).scrollTop()
		
		if ((bottom_of_screen - bottomOffset > top_of_element) && (top_of_screen < bottom_of_element)){
			lastVisible = $(this)
		}
})

if($(window).scrollTop() < startFrom){
	lastVisible = $('[data-elementor-type="wp-page"] > .elementor-element').eq(0)
}
$('body').addClass('changing').css('background-color', lastVisible.attr('data-color'))
	
setTimeout(function(){
	if(!changing){
			$('body').removeClass('changing')		 
	}
	changing = false
}, 800+100)

var classList = document.querySelector('body').className.split(' ')
classList.forEach(function(className){
	if( className.startsWith('rgbc') || className.startsWith('rgbac') ) {
		$('body').removeClass(className)
	}
})

var currentClass = encodeClass(lastVisible.attr('data-color'))

$('body').addClass(currentClass)
	
$('.sb-color > .elementor-element').removeClass('show')
$('.sb-color').each(function(){
	
	var found = false
	$(this).children('.elementor-element').each(function(){
			if( encodeClass($(this).attr('data-color')) == currentClass ){
					$(this).addClass('show')
					found = true
			}
	})
	if(!found){
		$(this).children('.elementor-element').eq(0).addClass('show')
	}
})

})

</script>
<style>
	body.loading{
		opacity: 1;
	}
	body.loaded{
		--g-transition: 0.8s;	
	}
	body,
	body .elementor-widget,
	body .elementor-widget > *{
		transition: all var(--g-transition) ease-in-out !important;
	}
	.sb-color > *{
		opacity: 0;
		pointer-events: none;
		transition: all var(--g-transition) ease-in-out !important;
	}
	.sb-color > *.show{
		opacity: 1;
		pointer-events: unset;
	}
</style>