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

Дата публикации: 2016-04-19

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

От автора: в предыдущей статье я познакомил вас с 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

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

<section class="section second">
    <div class="container">
        <div class="row">
            <div class="col-sm-4 is-animated">
                <img class="img-responsive" src="//placeimg.com/300/350/nature">
            </div>
            <div class="col-sm-4 is-animated">
                <img class="img-responsive" src="//placeimg.com/300/350/people">
            </div>
            <div class="col-sm-4 is-animated">
                <img class="img-responsive" src="//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>

</div>

</div>

</div>

<button type="button" class="btn btn-lg">A Simple Button</button>

</div>

</div>

</div>

</section>

Обратите внимание, что к элементам, которые нужно анимировать, мы добавили классы 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.7s');
}

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.7s');

}

В этом примере при переходе с первого слайда на второй мы присваиваем целевым элементам две анимации (fadeInUpBig и rollIn). А с помощью свойства 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="//placeimg.com/300/350/tech">
          </div>
          <div class="col-sm-3 is-animated">
              <img class="img-responsive" src="//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>

</div>

</div>

<button type="button" class="btn btn-lg">A Simple Button</button>

</div>

</div>

</div>

</section>

Как и в предыдущем примере, мы добавили классы 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.2s');
}

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.2s');

}

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

Анимация №3

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

<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>

</div>

</div>

<button type="button" class="btn btn-lg">Thank You!</button>

</div>

</div>

</div>

</section>

И снова мы используем классы 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.2s')
    $isAnimatedFourthSingle.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
    $(this).removeClass('lightSpeedIn').addClass('zoomOutDown');
    });
}

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.2s')

$isAnimatedFourthSingle.one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {

$(this).removeClass('lightSpeedIn').addClass('zoomOutDown');

});

}

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

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

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

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