Smartlanding / Элементы сайта /

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


css анимация при прокруткеЗдравствуйте, дорогие друзья! Долго готовил материал сегодняшней статьи и постарался подать его максимально подробно. Надеюсь, после прочтения у вас больше не останется вопросов о том, как делается CSS-анимация при прокрутке страницы.
Сразу хочу предупредить: мы не будем сами писать скрипты или что-то подобное (блог ведь рассчитан на новичков, и нам необходимо, чтобы легко подключалось и безотказно работало).

СSS-анимация при прокрутке страницы

Для работы нам понадобится скачать несколько инструментов.

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

Размер: 0.48 Мб

В первую очередь – это файл animate.css – библиотека, в которой прописаны стили для анимации элементов на странице. Для того, чтобы визуально оценить и выбрать вид анимации, обычно, я использую страничку ресурса http://daneden.github.io/animate.css/

То есть процесс добавления анимации элементу начинается с того, что я захожу на данный ресурс и выбираю стиль анимации из предложенных вариантов. (Благо там есть из чего выбрать).

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

Далее необходимо подключить таблицу стилей. Для этого копируем файл animate.css в папку с таблицами стилей вашего сайта. У меня – эта папка так и называется "css". А в файле "index.html", между тегами head прописываем:

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

Теперь необходимо задать класс элементу, который хотим с анимировать, с соответствующим названием, которое выбрали на предыдущем шаге. То есть стиль bounceInRight, показанный на скриншоте выше – будет являться классом для элемента, который будем анимировать. А также класс animated, для того, чтобы анимация проигрывалась. Надеюсь понятно объяснил? Если нет, то на примере ниже - это предельно просто!

Например:

<div class="logo">
  <img src="images/logo.png" class=" bounceInRight animated " alt="Логотип">
</div>
анимация элементов при прокрутке страницы

Теперь, при обновлении страницы будет проигрываться анимация. Можете попробовать, нажав кнопку f5.

Правда круто? Но на этом процесс создания анимации не закончен, ведь нам необходимо сделать так, чтобы проигрывание анимации происходило при прокрутке страницы, а не сразу после ее загрузки!

Для этого нам придется воспользоваться готовым скриптом wow.js. Его необходимо поместить в папку js основного каталога вашего сайта. Я выложил только сжатый вариант, потому что он меньше весит и быстрее грузиться. Полностью ознакомиться с проектом можно
здесь.

Итак, для того, чтобы анимация элементов происходила при прокрутке страницы, необходимо в файл index.html, между тегами head добавить следующие 2 строки:

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

А также, классу bounceInRight, вместо animated необходимо добавить wow. Должно получиться следующее:

<div id="logo">
<img src="images/logo.png" class="fadeInRight wow" alt="Логотип">
</div>
анимация элементов при прокрутке страницы

Как видите, первая анимация проигрывается сразу после загрузки страницы, а вторая, только при прокрутке, когда ее видит пользователь. В то время как первую – не заметит, если она расположена не на первом экране.
Можно сделать вывод, что процесс создания такой анимации сводиться к 5 минутам потраченного времени. Все что нужно сделать, это:

  • Дописать 3 строчки кода между отрывающимся и закрывающимся тегом head.
  • Скопировать файл animate.css и wow.min.js в соответствующие папки.
  • Добавить класс wow и класс с названием анимации элементу, который хотим с анимировать

И все, ваш сайт будет смотреться гораздо живее и эффектнее. А в случае продажи – дороже.

Но есть дополнительные инструменты управления анимацией. У каждого элемента можно задать несколько специальных атрибутов для более тонкой настройки:

  • data-wow-offset: Дистанция от нижнего края браузера для начала анимации;
  • data-wow-duration: Изменение длительности анимации;
  • data-wow-delay: Задержка перед стартом анимации;
  • data-wow-iteration: Сколько раз повторять анимацию?

Например так:

<div id="logo">
  <img src="images/logo.png" class="fadeInRight wow" alt="Логотип" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10">
</div>

А на сегодня все, до встречи на smartlanding. Оставляйте свои комментарии и задавайте вопросы! Пока!

P.s.: Если вы хотите сделать так, чтобы анимация проигрывалась при скролле в обе стороны, то рекомендую почитать вам эту статью

Добавить комментарий