Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. jQuery
Webdesign

Небольшое руководство: анимации прокрутки с использованием fullPage.js и Animate.css

by
Difficulty:IntermediateLength:ShortLanguages:

Russian (Pусский) translation by Alex Bogdanov (you can also view the original English article)

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

Нужные библиотеки

Для нашего урока я создал демо страницу. Если взгляните в меню Settings, вы увидите, какие библиотеки я включил:

file

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

Процесс

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

file

Перед тем, как приступить к коду, который запустит анимации, сперва разберемся с основными шагами:

  • Получим преимущество обратных функций, которые есть у fullPage. Именно в нашем случае мы хотим анимировать вторую, третью и четвертую секции, так что мы воспользуемся обратной функцией onLeave. Если нам нужно анимировать и первую секцию, то можно использовать обратную функцию afterLoad. Также для анимации слайдов можно использовать функции afterSlideLoad и onSlideLeave.
  • Добавим динамичных анимаций из библиотеки animate.css, используя jQuery.
  • Также заанимируем элементы последовательно, используя свойство CSS animate-delay.

Теперь займемся анимациями!

Анимация #1

Вторая секция страницы включает три изображения и одну кнопку. Вот структура:

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

Код jQuery, который запускает анимации для секций выглядит так:

В этом примере, когда исчезает первая секция и появляется вторая, мы применяем две разные анимации (например, fadeInUpBig и rollIn) к нужным элементам. Дополнительно используем свойство CSS animation-delay, чтобы задать, когда эти анимации будут стартовать.

Анимация #2

Третья секция содержит два изображения и одну кнопку. Ниже вы можете посмотреть на соответствующий HTML код.

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

Код jQuery выглядит следующим образом:

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

Анимация #3

Четвертая секция состоит из трех элементов: два абзаца и одна кнопка. Структура:

Вновь, is-animated и is-animated__single нужным элементам.

Затем соответствующий код jQuery:

Здесь оба абзаца появятся одновременно с использованием анимации zoomIn. А кнопка появится с использованием анимации lightSpeedIn.

Более того, следующий код поможет нам определять, когда анимация закончится:

В нашем примере мы покажем кнопку всего на несколько секунд, а затем воспользуемся вышеупомянутым кодом, чтобы ее спрятать.

Ниже вы можете взглянуть на прикрепленное демо с CodePen (но через full page demo куда эффективней):

Заключение

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

Если вы хотите улучшить это демо, вот что вы можете попробовать сделать:

  • Включить анимации только для широких экранов. Для этого используйте matchMedia метод.
  • Сделайте код внутри onLeave более легкодоступным к повторному использованию.
Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.