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

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

HIT

27.02.2017

2086

Учимся использовать 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 — определяет смещение объекта. Значение: расстояние в пикселях

В мобильных версиях скрипт работает отлично! Только желательно .wrapper’у задавать свойство overflow: hidden;

Перемещение нескольких блоков при скроллинге (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;}

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Модальное окно на jquery

Модальное окно на jquery

Создаем модальное (всплывающее) окно основанное на технологии jquery. Про подобное решение на чистом CSS читайте здесь. Принцип модального окна Вставляем в HEADER (выше всего контента), #backfon — это фон модального Читать далее »

/
Прокрутка страницы вверх и вниз

Прокрутка страницы вверх и вниз

Очень нужная «фишка» на сайте — стрелка прокрутки вверх, особенно если страницы получаются довольно длинными, !особенно если на сайте нет прилепленного header. Вставляем в самый низ, перед wp_footer <p id="Go_Top"><a Читать далее »

Плавный скроллинг по якорям

Плавный скроллинг по якорям

Реализуем плавный переход по якорным ссылкам в рамках текущей страницы. Данный скрипт особенно хорош тем, что не добавляет в строке браузера приставки /#link. Script Скорость перехода может регулироваться. В предложенном Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Изменение объекта при скроллинге Изменение объекта при скроллинге Изменение объекта при скроллинге
Пользовательский метод доставки
Рекомендации для васПользовательский метод доставкиOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.