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

() translation by (you can also view the original English article)

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

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

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

fullpage.js
animate.css
jQuery
Bootstrap

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

Процесс

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

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

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

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

Анимация #1

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

      <section class="section second">
          <div class="container">
              <div class="row">
                  <div class="col-sm-4 is-animated">
                      <img class="img-responsive" src="https://placeimg.com/300/350/nature">
                  </div>
                  <div class="col-sm-4 is-animated">
                      <img class="img-responsive" src="https://placeimg.com/300/350/people">
                  </div>
                  <div class="col-sm-4 is-animated">
                      <img class="img-responsive" src="https://placeimg.com/300/350/tech">
                  </div>
                  <div class="col-xs-12 text-center is-animated__single">
                      <button type="button" class="btn btn-lg">A Simple Button</button>
                  </div>
              </div><!--end of row-->
          </div><!--end of container-->
      </section>

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

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

      var $isAnimatedSecond = $('.second .is-animated'),
          $isAnimatedSecondSingle = $('.second .is-animated__single');

      /* this code is part of the onLeave callback */    
      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.7s');
      }

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

Анимация #2

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

      <section class="section third">
        <div class="container">
      		<div class="row">
      			<div class="col-sm-3 col-sm-offset-3 is-animated">
      				<img class="img-responsive" src="https://placeimg.com/300/350/tech">
      			</div>
      			<div class="col-sm-3 is-animated">
      				<img class="img-responsive" src="https://placeimg.com/300/350/any">
      			</div>
      			<div class="col-xs-12 text-center is-animated__single">
      				<button type="button" class="btn btn-lg">A Simple Button</button>
      			</div>
      		</div><!--end of row-->
      	</div><!--end of container-->
      </section>

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

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

        var $isAnimatedThird = $('.third .is-animated'),
            $isAnimatedThirdSingle = $('.third .is-animated__single');

        /* this code is part of the onLeave callback */
        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.2s');
        }

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

Анимация #3

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

      <section class="section fourth">
      	<div class="container">
      		<div class="row">
      			<div class="col-xs-12 is-animated">
      				<p>Some text here</p>
      			</div>
      			<div class="col-xs-12 is-animated">
      				<p>Some text here</p>
      			</div>
      			<div class="col-xs-12 text-center is-animated__single">
                	<button type="button" class="btn btn-lg">Thank You!</button>
        		</div>
      		</div><!--end of row-->
      	</div><!--end of container-->
      </section>

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

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

      var $isAnimatedFourth = $('.fourth .is-animated'),
          $isAnimatedFourthSingle = $('.fourth .is-animated__single');

      /* this code is part of the onLeave callback */
      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.2s')
          $isAnimatedFourthSingle.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
          $(this).removeClass('lightSpeedIn').addClass('zoomOutDown');
          });
      }

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

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

1	$('#yourElement').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', doSomething);

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

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

Заключение

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

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

Включить анимации только для широких экранов. Для этого используйте matchMedia метод.
Сделайте код внутри onLeave более легкодоступным к повторному использованию.