7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. jQuery

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

Scroll to top
Read Time: 4 mins

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

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

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

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

filefilefile

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

Процесс

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

filefilefile

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

  • Получим преимущество обратных функций, которые есть у 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
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
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.