Получите скидку 65% на любой курс программирования на популярной образовательной платформе Skillbox!

Зарегистрируйте домен и получите 2 месяца бесплатного хостинга и SSL-сертификат на 1 год в подарок

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

В последнее время стало популярным делать не просто красивые сайта, а еще и чтобы в них была анимация во время прокрутки страницы вниз. По мере того, как пользователь спускается ниже, элементы на странице появляются не сразу, а чуть позже и с каким-нибудь эффектом. Особенно такие эффекты при прокрутке очень популярны на так называемых лэндинг-страницах (одностраничных сайтах).

Анимация при прокрутке без jQuery

Сделать простую анимацию на странице с помощью animate.css и wow.js очень быстро и просто.

animate.css - css-библиотека, содержащая классы, которые позволяют выполнять анимацию элементов. Скачать библиотеку можно с официального сайта, или можно подключить библиотеку через CDN:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css" />

wow.js - javascript-библиотека, позволяющая запускать анимацию при прокрутке страницы. Скачать можно на GitHub, или можно подключить библиотеку через CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

Для работы анимации и скрипта wow.js библиотека jQuery не требуется.

Как сделать анимацию на странице при прокрутке

С помощью указанных выше библиотек анимация делается очень легко и быстро:

1. Подключаем css библиотеку animate.sss

<link href="animate.css" rel="stylesheet" />

2. Подключаем и активируем wow.js

<script src="wow.min.js"></script>
<script type="text/javascript">
new WOW().init();
</script>

3. Добавляем классы к элементам для анимации

<div class="wow bounceInUp">
Пример простой анимации при прокрутке страницы
</div>

bounceInUp - название css-класса для анимации элемента из библиотеки animate.css, который вы заменяете на тот, который вам необходим.

Изначально html-элементы с классом "wow" скрыты, в когда пользователь прокручивает страницу до элемента, он появляется на странице с анимацией. Если элемент уже сразу при загрузке попадает в видимую область страницы, тогда анимация запустится сразу же.

Настройки wow.js

Библиотека анимации при прокрутке имеет несколько опций, которые добавляются к тегу в виде data-атрибутов.

data-wow-duration - продолжительность анимации

data-wow-delay - задержка перед началом анимации

data-wow-offset - расстояние в пикселах от нижнего края окна браузера до элемента, при достижении которого начнется анимация

data-wow-iteration - повторять анимацию несколько раз

Пример:

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">
Анимация начнется через 5 сек и будет длиться 2 сек
</div>

Так же можно указать несколько опций при активации wow.js

boxClass - имя класса, которое делает элементы невидимыми и показывает их при прокрутке страницы пользователем (по умолчанию "wow").

animateClass - имя класса, запускающего анимацию элемента (для библиотеки animates.css это имя класса "animated")

offset - расстояние в пикселах от нижнего края окна браузера до элемента, при достижении которого начнется анимация (аналогично data-wow-offset, но для всех анимируемых элементов).

mobile - отключает анимацию для смартфонов

live - постоянно проверять появление новых элементов для анимации на странице

callback - функция, которая будет запускаться при старте анимации. При этом в функцию передается ссылка на объект, который анимируется.

scrollContainer - селектор прокручивающегося контейнера (по умолчанию "window")

Пример:

wow = new WOW({
  mobile:       false,      // не запускать анимацию на смартфонах
  live:         true        // всё время проверять появление новых wow-элементов
});
wow.init();

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

Приведу более полный пример, показывающий возможности wow.js и animate.css

<html>
<link href="animate.css" rel="stylesheet" type="text/css" />
<script src="wow.min.js" type="text/javascript"></script>
</html>
<body>
<div style="max-width:800px; margin:auto; text-align:center; background:#EAEAEA;">

  <div style="height:1200px;">
    <h1 class="wow slideInLeft" style="padding:10px; background:#00FFFF;">
    Первый заголовок анимируется сразу
    </h1>
    <p>Крутите страницу ниже</p>
    <p>И еще ниже...</p>
  </div>

  <div style="height:500px;">
    <h1 class="wow rotateInDownRight" data-wow-duration="2s" style="padding:10px; background:#00FF00;">
    Второй заголовок
    </h1>
  </div>

  <div  style="height:300px;">
    <h1 class="wow swing" data-wow-duration="1s" data-wow-iteration="2" style="padding:10px; background:#FFFF00;">
    Третий заголовок
    </h1>
  </div>

</div>
<script type="text/javascript">
wow = new WOW({
  mobile:       false,
  live:         true,
  callback:     function(box) {
    console.log('animation started');
  }
});
wow.init();
</script>
</body>
</html>

Посмотреть пример анимации в действии.

Анимация при прокрутке с использованием jQuery

Если использовать библиотеку jQuery, можно сделать анимацию самостоятельно с нужным алгоритмом. При этом для определения момента запуска анимации можно пойти 2 путями:

запускать анимацию, когда прокрутили страницу на определенное кол-во пикселей
запускать анимацию, когда прокрутили страницу до нужного элемента

Пример запуска анимации первым вариантом:

var animate_point1 = 500;  // первая точка запуска анимации
var animate_point2 = 1000; // вторая точка запуска анимации
$(window).scroll(function() {
  if ($(this).scrollTop() > animate_point1) {
    // первая анимация
  }
  if ($(this).scrollTop() > animate_point2) {
    // вторая анимация
  }
});

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

Алгоритм запуска анимации при прокрутке до нужного элемента должен учитывать высоту окна браузера. Как только нижняя граница окна при прокрутке достигнет элемента, можно запускать анимацию. Но чтобы увидеть анимацию, лучше запускать ее не сразу, а когда прокрутим еще чуть-чуть.

Пример анимации при прокрутке до элемента:

var element_point = $('#animated_element').offset().top; // положение элемента относительно начала страницы
var element_animated = false; // чтобы анимация происходила только один раз, используем эту переменную-флаг
var animate_delay = 100; // задержка анимации (через 100 пикселей)

$(window).scroll(function() {
  // проверяем, прокрутили ли страницу до элемента
  if (!element_animated && $(window).scrollTop() + window.innerHeight > element_point + animate_delay) {
    element_animated = true; // отмечаем, что анимация выполнена

    // анимация
    
  }
});

Сама анимация может быть сколько угодно сложной. Это может быть присвоение какого-то css-класса, который реализует собственную анимацию, либо это может быть что-то еще.

Пример анимации при прокрутке с использованием jQuery

<html>
<script src="jquery-2.1.1.min.js" type="text/javascript"></script>
</html>
<body>
<div style="max-width:800px; margin:auto; text-align:center; background:#EAEAEA;">

  <div style="height:1200px;">
    <p>Крутите страницу ниже</p>
    <p>И еще ниже...</p>
  </div>

  <div style="height:500px;">
    <h1 class="animate" style="display:inline-block; opacity:0; background:#00FF00;">
    Анимация
    </h1>
  </div>

</div>
<script type="text/javascript">
var element_point = $('.animate').offset().top;
var element_animated = false;
var animate_delay = 100;
$(window).scroll(function() {
  if (!element_animated && $(window).scrollTop() + window.innerHeight > element_point + animate_delay) {
    element_animated = true;
    $('.animate').animate({opacity:1, width:'90%', padding:'20px'}, 800, function() {
      $('.animate').animate({width:'80%', padding:'10px'}, 400);
    });
  }
});
</script>
</body>
</html>

Посмотреть пример в действии.

Категория: JavaScript + jQuery