Плавная смена фона при прокрутке страницы

С использованием кода

Берет

Переходим в админке вордпресса в 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>

При помощи плагина

Для создания плавной смены фона при прокрутке в Elementor можно использовать плагин под названием «Scrolling Background«. Этот плагин позволяет установить разные фоны для разных секций страницы, и при прокрутке страницы фон будет плавно меняться.

Для установки плагина нужно зайти в раздел «Плагины» в админ-панели WordPress и нажать на кнопку «Добавить новый». Затем в строке поиска ввести «Scrolling Background» и нажать на кнопку «Установить». После установки плагина его нужно активировать.

После активации плагина нужно зайти в редактор страницы в Elementor и выбрать секцию, для которой нужно установить фон. Затем в настройках секции нужно выбрать вкладку «Background» и в выпадающем меню выбрать «Scrolling Background«. После этого можно выбрать изображения для разных секций страницы и настроить плавность перехода между ними.

Таким образом, с помощью плагина «Scrolling Background» можно создать плавную смену фона при прокрутке страницы в Elementor.

Оцените статью
( 5 оценок, среднее 5 из 5 )
LinkWhite
Добавить комментарий