Изменение объекта при скроллинге

Учимся использовать jquery эффекты при скроллинге. Данные эффекты чаще всего применяются на промо-страницах и лэндингах.

ScrollMe

Скрипт Scrollme состоит из одного файла с набором скриптов, подключаем его

wp_enqueue_script( 'scrollme', get_template_directory_uri() . '/js/jquery.scrollme.min.js' , array( ), '1.0' , true );

Верстка блока для применения эффектов

<div class="scrollme">
<div
class="animateme"
data-when="enter"
data-from="0.5"
data-to="0"
data-opacity="0"
data-translatex="-200"
data-rotatez="90"
>
Yup, that's all.
</div>
</div>

Класс scrollme нужен для определения области действия изменения и animateme это объект изменения с параметрами.

Параметры ScrollMe

data-when — когда эффект начинает действовать:
enter — при вхождении в область, exit — при выходе из области, span — при контакте с самим объектом.

data-from, data-to — определение силы эффекта в начале и конце анимации.

easing (необязательный) — параметры смягчения анимации:

• easeout — начинается внезапно и приходит к постепенной остановке (по умолчанию)
• easein — начинает постепенно и приходит к резкой остановке
• easeinout — запускает и приходит постепенно останавливается
• linear — нет ослабления

crop (необязательный) — параметр ограничения эффекта границами документа true (по умолчанию), либо за его пределами false.

opacity (необязательный) — определяет прозрачность объекта. Значение: 0 — 1

scale, scalex, scaley и scalez — определяет масштаб объекта. Значение: Коэффициент масштабирования

rotatex, rotatey и rotatez — определяет угол поворота. Значение: Угол поворота в градусах

translatex, translatey и translatez — определяет смещение объекта. Значение: расстояние в пикселях

Перемещение нескольких блоков при скроллинге (js)

Данный метод хорошо подойдет для разбирающегося объекта на части.

Верстка

<div class="displace"><div class="displace-box">

	<div style="left: -350px;" class="layer" data-scroll-speed="4"><img src="/wp-content/uploads/2020/02/cable.png"></div>
	
	<div style="bottom: 0;" class="layer" data-scroll-speed-2="-8"><img src="/wp-content/uploads/2020/02/bottom-part.png"></div>	
	
	<div style="left: 0;" class="layer" data-scroll-speed="4"><img src="/wp-content/uploads/2020/02/back-part.png"></div>
	
	<div class="layer" data-scroll-speed="0"><img src="/wp-content/uploads/2020/02/transformer-part.png"></div>	
	
	<div style="bottom: 3px; right: 5px;" class="layer" data-scroll-speed="-15"><img src="/wp-content/uploads/2020/02/chip-part.png"></div>
	
	<div style="right: 3px;"class="layer" data-scroll-speed="-3"><img src="/wp-content/uploads/2020/02/front-part.png"></div>
	
	<div style="top: -5px; right: 5px;" class="layer" data-scroll-speed-2="17"><img src="/wp-content/uploads/2020/02/top-part.png"></div>	
	
</div></div>

В style к каждому слою прописываем корректировку чтобы изначально объект был состыкован как целый. В параметр data-scroll-speed (горизонталь) и data-scroll-speed-2 (вертикаль) прописываем смещение. Можно прописывать минусовые значения (только целые числа).

Скрипт (чистый js)

// Горизонтальное смещение
$.fn.moveIt = function(){
	var $window = $(window);
	var instances = [];
	 
	$(this).each(function(){
		instances.push(new moveItItem($(this)));
	});
	 
	window.addEventListener('scroll', function(){
		var scrollTop = $window.scrollTop();
		instances.forEach(function(inst){
			inst.update(scrollTop) + 250;
		});
	}, {passive: true});
}
 
var moveItItem = function(el){
	this.el = $(el);
	this.speed = parseInt(this.el.attr('data-scroll-speed'));
};
 
moveItItem.prototype.update = function(scrollTop){
	this.el.css('transform', 'translateX(' + -(scrollTop / this.speed) + 'px)');
};
 

// Вертикальное смещение
$.fn.moveIt2 = function(){
	var $window = $(window);
	var instances = [];
	 
	$(this).each(function(){
		instances.push(new moveItItem2($(this)));
	});
	 
	window.addEventListener('scroll', function(){
		var scrollTop2 = $window.scrollTop();
		instances.forEach(function(inst){
			inst.update(scrollTop2);
		});
	}, {passive: true});
}
 
var moveItItem2 = function(el){
	this.el = $(el);
	this.speed = parseInt(this.el.attr('data-scroll-speed-2'));
};
 
moveItItem2.prototype.update = function(scrollTop2){
	this.el.css('transform', 'translateY(' + -(scrollTop2 / this.speed) + 'px)');
};



// Initialization
$(function(){
	$('[data-scroll-speed]').moveIt();
});

$(function(){
	$('[data-scroll-speed-2]').moveIt2();
});

Прописываем стили

.displace {margin-top: 150px;}

.displace-box {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	height: 430px;
    width: 270px;
    margin: 0 auto;	
}
 
.layer {position: absolute;}