Эффекты прокрутки страницы

jQuery 24.06.2017

Представление мини-библиотеки экспериментальных эффектов прокрутки страницы.

Мы собрали некоторые причудливые эффекты, которые происходят, когда пользователь просматривает разделы веб-страницы. Некоторые из эффектов довольно экстремальные, но они могут оказаться очень полезными, если ваша цель - создать впечатляющий пользовательский интерфейс.

Все анимации были созданы с помощью Velocity.js (julian.com/research/velocity).

Обратите внимание

Эти эффекты не видны на небольших устройствах, где пользователь может просто прокручивать список разделов. Мы тестировали эффекты на мобильных устройствах, а производительность была плохой, поэтому мы решили ограничить их более крупными и мощными устройствами.

Как это работает

Чтобы применить анимацию или включить / отключить захват прокрутки, просто используйте типы data-animation и data-hijacking, применяемые к <body>. Значения, поддерживаемые data-animation, не имеют / scaleDown / rotate / gallery / catch / opacity / fixed / parallax. Хотя data-hijacking может быть включен или выключен.

<!-- hijacking: on/off - animation: none/scaleDown/rotate/gallery/catch/opacity/fixed/parallax -->
<body data-hijacking="off" data-animation="none">

Создание структуры

Структура HTML представляет собой список элементов <section>, а также навигацию. Мы помещаем только заголовок внутри каждого раздела. При выбранной анимации Fixed или Parallax мы также устанавливаем фоновое изображение. Не стесняйтесь добавлять свой контент внутри каждого раздела> div.

<section class="cd-section visible">
 <div>
 <h2>Page Scroll Effects</h2>
 </div>
</section>
 
<section class="cd-section">
 <div>
 <h2>Section 2</h2>
 </div>
</section>
 
<section class="cd-section">
 <!-- ... -->
</section>
 
<nav>
 <ul class="cd-vertical-nav">
 <li><a href="#0" class="cd-prev inactive">Next</a></li>
 <li><a href="#0" class="cd-next">Prev</a></li>
 </ul>
</nav> <!-- .cd-vertical-nav -->

Добавление стиля

Все преобразования были созданы в jQuery с использованием Velocity.js (julian.com/research/velocity), поэтому объяснять CSS нет ни какого смысла. Мы просто устанавливаем высоту, равную 100vh для каждого <section>, чтобы полностью покрывать область просмотра, плюс мы устанавливаем цвета фона и изображения, используя: селектора :nth-of-type() и типы данных.

.cd-section {
  height: 100vh;
}
.cd-section:first-of-type > div {
  background-color: #2b334f;
}
.cd-section:nth-of-type(2) > div {
  background-color: #2e5367;
}
.cd-section:nth-of-type(3) > div {
  background-color: #267481;
}
.cd-section:nth-of-type(4) > div {
  background-color: #fcb052;
}
.cd-section:nth-of-type(5) > div {
  background-color: #f06a59;
}
[data-animation="parallax"] .cd-section > div {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
[data-animation="parallax"] .cd-section:first-of-type > div {
  background-image: url("../img/img-1.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(2) > div {
  background-image: url("../img/img-2.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(3) > div {
  background-image: url("../img/img-3.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(4) > div {
  background-image: url("../img/img-4.jpg");
}
[data-animation="parallax"] .cd-section:nth-of-type(5) > div {
  background-image: url("../img/img-5.jpg");
}

Обработка событий

Мы использовали два разных подхода в зависимости от того, выключен или отключен захват данных.

Когда data-hijacking = off, каждый раздел анимируется в соответствии с его положением относительно окна просмотра. Например, для анимации scaleDown мы изменяем значения opacity, scale, translateY и boxShadowBlur раздела> div-элементов:

//actualBlock is the section we are animation
var offset = $(window).scrollTop() - actualBlock.offset().top,
	windowHeight = $(window).height();
 
if( offset >= -windowHeight && offset <= 0 ) {
	// section entering the viewport
	translateY = (-offset)*100/windowHeight;
    scale = 1;
	opacity = 1;
} else if( offset > 0 && offset <= windowHeight ) {
	//section leaving the viewport 
    scale = (1 - ( offset * 0.3/windowHeight));
	opacity = ( 1 - ( offset/windowHeight) );
	translateY = 0;
	boxShadowBlur = 40*(offset/windowHeight);
}

Когда data-hijacking = on, мы определяем пользовательские эффекты для каждой анимации, используя функцию регистрации Velocity UI Pack (julian.com/research/velocity/#uiPack). Например, для эффекта масштабирования (анимация scaleDown) мы использовали:

$.Velocity
    .RegisterEffect("scaleDown", {
    	defaultDuration: 800,
        calls: [ 
            [ { opacity: '0', scale: '0.7', boxShadowBlur: '40px' }, 1]
        ]
    });