Переходим в админке вордпресса в Elementor — Custom code и добавляем новый код. При добавлении первой части кода, нужно указать в поле Location (<Body> — Start). Назвать его можете как хотите, просто что бы вы помнили за что он отвечает.
<style>
body{
opacity: 0;
}
</style>
При добавлении второй части кода, укажите в Location (<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>
