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

21

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

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

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

fullPage.js

animate.css

jQuery

Bootstrap

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

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

Процес

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

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

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

Потрібно скористатися колбек функціями плагіна fullPage. В нашому випадку нам потрібно анімувати другий, третій і четвертий слайд, значить, ми задіємо колбек функцію onLeave. Якщо нам потрібно анімувати перехід на першу секцію, можна взяти afterLoad. Точно так само ми будемо додатково використовувати функції afterSlideLoad і onSlideLeave.

Динамічно додати CSS анімацію з бібліотеки animate.css, якій потрібен JQuery.

Послідовно анімувати елементи сторінки за допомогою CSS властивості animate-delay.

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

Анімація №1

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

Порада: анімація під час прокручування сторінки за допомогою fullPage.js і Animate.css
Порада: анімація під час прокручування сторінки за допомогою fullPage.js і Animate.css
Порада: анімація під час прокручування сторінки за допомогою fullPage.js і Animate.css
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 код секції:

Порада: анімація під час прокручування сторінки за допомогою fullPage.js і Animate.css
Порада: анімація під час прокручування сторінки за допомогою fullPage.js і Animate.css
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 кнопка. Структура секції:

Some text here

Some text here

Thank You!

І знову ми використовуємо класи 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 для створення анімації під час прокручування сторінки.