Совет: анимация во время прокрутки страницы при помощи fullPage.js и Animate.css

анимация во время прокрутки страницы

От автора: в предыдущей статье я познакомил вас с fullPage.js, популярным JQuery плагином для создания полноэкранных страниц. В этой статье я дам вам небольшой совет и покажу, как создавать анимацию по событию прокрутки страницы при помощи fullPage.js и animate.css.

Необходимые библиотеки

В рамках данного примера я создал демо страницу. Если открыть вкладку settings, вы увидите, что я подключил следующие библиотеки:

fullPage.js

animate.css

jQuery

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Bootstrap

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

Процесс

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

Перед просмотром кода, который запускает анимацию, давайте поймем, что нам нужно сделать:

Нужно воспользоваться колбэк функциями из плагина fullPage. В нашем случае нам нужно анимировать второй, третий и четвертый слайд, значит, мы задействуем колбэк функцию onLeave. Если нам нужно анимировать переход на первую секцию, можно взять afterLoad. Точно так же мы будем дополнительно использовать функции afterSlideLoad и onSlideLeave.

Динамически добавить CSS анимацию из библиотеки animate.css, которой нужен JQuery.

Последовательно анимировать элементы страницы с помощью CSS свойства animate-delay.

А вот теперь приступим к созданию анимации!

Анимация №1

Вторая секция страницы состоит из трех изображений и одной кнопки. Структура:

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

В этом примере при переходе с первого слайда на второй мы присваиваем целевым элементам две анимации (fadeInUpBig и rollIn). А с помощью свойства animation-delay задаем задержку анимации для каждого элемента.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Анимация №2

В третьей секции у нас два изображения и одна кнопка. Соответственно HTML код секции:

Как и в предыдущем примере, мы добавили классы is-animated и is-animated__single к нужным элементам. Код JQuery:

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

Анимация №3

Четвертая секция состоит из 3 элементов: 2 параграфа и 1 кнопка. Структура секции:

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

Оба параграфа появляются одновременно при помощи zoomIn. А кнопка появляется с анимацией lightSpeedIn. Кроме того код ниже показывает, где заканчивается анимация:

В этом примере кнопка отображается всего пару секунд, а потом с помощью вышеупомянутого кода мы прячем ее. Ниже встроенное демо (лучше открыть полноэкранное демо):

Заключение

В этом уроке мы научились комбинировать библиотеки fullpage.js и animate.css для создания анимации во время прокрутки страницы.

Автор: George Martsoukos

Источник: http://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (2)

  1. Алексей

    Подскажите как зациклить эту анимацию, то есть, чтобы при прокрутке вверх и вниз анимация заново включалась

    • Ростислав

      Вы нашли ответ на этот вопрос? Так же столкнулся с этим. Думаю нужно использовать все те же колбеки, ну хз может кто то нашел решение

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree