Порада: анімація під час прокручування сторінки за допомогою fullPage.js і Animate.css

Від автора: у попередній статті я познайомив вас із fullPage.js, популярним JQuery плагіном для створення повноекранних сторінок. У цій статті я дам вам невеликий рада і покажу, як створювати анімацію події прокрутки сторінки за допомогою fullPage.js і animate.css.

Необхідні бібліотеки

В рамках даного прикладу я створив демо сторінку. Якщо відкрити вкладку settings, ви побачите, що я підключив наступні бібліотеки:

Фреймворк Bootstrap можна було б і не підключати; я додав його з-за його стилів.

Процес

Наша сторінка складається з 4 секцій; кожна секція цілком заповнює сторінку (завдяки fullPage). Перейти до наступної секції користувач може за допомогою прокрутки або посилань праворуч. Під час кожного переходу ми запускаємо певну анімацію. Приміром, ми позиціонуємо зображення.

Перед переглядом коду, який запускає анімацію, давайте зрозуміємо, що нам треба зробити:

А ось тепер приступимо до створення анімації!

Анімація №1

Друга секція сторінки складається з трьох зображень і однієї кнопки. Структура:

A Simple Button

Зверніть увагу, що до елементів, які потрібно анімувати, ми додали класи is-animated і is-animated__single. Також у елементів з класом is-animated загальні ефекти анимании (наприклад, fadeInUpBig). Код JQuery для запуску анімації для даної секції:

var $isAnimatedSecond = $(‘.second .is-animated’),
$isAnimatedSecondSingle = $(‘.second .is-animated__single’);
/* частина колбек функції onLeave */
if( index == 1 && nextIndex == 2 ) {
$isAnimatedSecond.addClass(‘animated fadeInUpBig’);
$isAnimatedSecond.eq(0).css(‘animation-delay’, ‘.3s’);
$isAnimatedSecond.eq(1).css(‘animation-delay’, ‘.6s’);
$isAnimatedSecond.eq(2).css(‘animation-delay’, ‘.9s’);
$isAnimatedSecondSingle.addClass(‘animated rollIn’).css(‘animation-delay’, ‘1.7 s’);
}

У цьому прикладі при переході з першого слайда на другий ми присвоюємо цільовим елементам дві анімації (fadeInUpBig і rollIn). А за допомогою властивості animation-delay задаємо затримку анімації для кожного елемента.

Анімація №2

У третій секції у нас два зображення і одна кнопка. Відповідно HTML код секції:

A Simple Button

Як і в попередньому прикладі, ми додали класи is-animated і is-animated__single до потрібних елементів. Код JQuery:

var $isAnimatedThird = $(‘.third .is-animated’),
$isAnimatedThirdSingle = $(‘.third .is-animated__single’);
/* частина колбек функції onLeave */
if( ( index == 1 || index == 2) && nextIndex == 3 ) {
$isAnimatedThird.eq(0).addClass(‘animated fadeInRightBig’).css(‘animation-delay’, ‘.3s’);
$isAnimatedThird.eq(1).addClass(‘animated fadeInLeftBig’).css(‘animation-delay’, ‘.6s’);
$isAnimatedThirdSingle.addClass(‘animated bounceInDown’).css(‘animation-delay’, ‘1.2 s’);
}

Для послідовного показу зображень у цій секції ми використовували анімації fadeInRightBig і fadeInLeftBig. А кнопку ми показуємо з допомогою bounceInDown.

Анімація №3

Четверта секція складається з 3 елементів: 2 параграфа 1 кнопка. Структура секції:

І знову ми використовуємо класи is-animated і is-animated__single, не забудьте про них. Код JQuery:

var $isAnimatedFourth = $(‘.fourth .is-animated’),
$isAnimatedFourthSingle = $(‘.fourth .is-animated__single’);
/* частина колбек функції onLeave */
if( ( index == 1 || index == 2 || index == 3 ) && nextIndex == 4 ) {
$isAnimatedFourth.addClass(‘animated zoomIn’).css(‘animation-delay’, ‘.6s’);
$isAnimatedFourthSingle.addClass(‘animated lightSpeedIn’).css(‘animation-delay’, ‘1.2 s’)
$isAnimatedFourthSingle.one(‘webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend’, function() {
$(this).removeClass(‘lightSpeedIn’).addClass(‘zoomOutDown’);
});
}

Обидва параграфа з’являються одночасно за допомогою zoomIn. А кнопка з’являється з анімацією lightSpeedIn. Крім того нижче код показує, де закінчується анімація:

$(‘#yourElement’).one(‘webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend’, doSomething);

У цьому прикладі кнопка відображається всього пару секунд, а потім з допомогою вищезгаданого коду ми ховаємо її. Нижче вбудоване демо (краще відкрити повноекранне демо):

Висновок

У цьому уроці ми навчилися комбінувати бібліотеки fullpage.js і animate.css для створення анімації під час прокручування сторінки.