Работа со скриптами. Урок 03. Анимация при скролле
Анимацию при скролле обеспечивает скрипт wow.js - первая ссылка в Google на пример работы скрипта http://mynameismatthieu.com/WOW/, вторая - на его репозиторий на гитхабе https://github.com/matthieua/WOW.
Скачиваем командой
$ bower i wow.js
В состав wow.js входит файл animate.css с эффектами анимации.
Первая ссылка в Google ведёт на сайт где можно увидеть и выбрать понравившиеся эффекты: https://daneden.github.io/animate.css/ Все они входят в файл animate.css, который весит 70 кБ, если скачивать его отдельно
$ bower i animated.css
Позже, этот файл нужно будет отредактировать, оставив только те эффекты, которые были использованы. Автор советует использовать не больше 5 эффектов на странице
Подключием стиль
<link rel="stylesheet" href="css/animate.css">
Подключаем скрипт
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/wow/dist/wow.min.js"></script>
<script src="js/custom.js"></script>
Для работы скрипта в файле custom.js достаточно прописать строку (скопирована с гитхаба)
Всё, что нам осталось, у блоков, которые хотим анимировать. прописывать дополнительно два класса: wow и выбранный эффект с сайта https://daneden.github.io/animate.css/
Для эффектов есть возможность указывать дополнительные параметры (скопировано с гитхаба)
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section><section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></section>
Их значение
data-wow-duration="2s" // время анимации, по умолчанию 1 с, лучше так и оставить
data-wow-delay="5s" // задержка перед началом анимации. Можно использовать если есть несколько однотипных элементов с одинаковой анимацией, чтобы они анимировались один за другим
data-wow-offset="10" // на сколько пикселей должен прокрутиться сайт, чтобы началась анимация. Оптимально 150-200 рх, а по умолчанию 0. То есть это значение лучше менять.
data-wow-iteration="10" // количество повторений анимации. По умолчанию 1, так и оставим.
Если хотим указать постоянные настройки, например, всегда начинать анимацию, когда сайт прокрутится на 150 рх. или всегда отключить анимацию на мобильных телефонах, код в custom.js будет таким (скопирован с гитхаба)
var wow = new WOW(
{
boxClass: 'wow', // animated element css class (default is wow)
animateClass: 'animated', // animation css class (default is animated)
offset: 150, // distance to the element when triggering the animation (default is 0)
mobile: false, // trigger animations on mobile devices (default is true)
live: true, // act on asynchronously loaded content (default is true)
scrollContainer: null // optional scroll container selector, otherwise use window
}
);
wow.init();
Здесь такие изменения:
callback удалены, они нам не нужны;
offset: был 0 стал 150;
mobile: был true стал false.
Редактирование animate.css
Оставляем общие классы, и те эффекты, которые использовали.
Самые подходящие fadeInRight, fadeIn, fadeInLeft
Можно посмотреть bounce, bounceIn, flipInX (для заголовков).
Скачиваем командой
$ bower i wow.js
В состав wow.js входит файл animate.css с эффектами анимации.
Первая ссылка в Google ведёт на сайт где можно увидеть и выбрать понравившиеся эффекты: https://daneden.github.io/animate.css/ Все они входят в файл animate.css, который весит 70 кБ, если скачивать его отдельно
$ bower i animated.css
Позже, этот файл нужно будет отредактировать, оставив только те эффекты, которые были использованы. Автор советует использовать не больше 5 эффектов на странице
Подключием стиль
<link rel="stylesheet" href="css/animate.css">
Подключаем скрипт
<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/wow/dist/wow.min.js"></script>
<script src="js/custom.js"></script>
Для работы скрипта в файле custom.js достаточно прописать строку (скопирована с гитхаба)
new WOW().init();
Всё, что нам осталось, у блоков, которые хотим анимировать. прописывать дополнительно два класса: wow и выбранный эффект с сайта https://daneden.github.io/animate.css/
Для эффектов есть возможность указывать дополнительные параметры (скопировано с гитхаба)
<section class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></section><section class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></section>
Их значение
data-wow-duration="2s" // время анимации, по умолчанию 1 с, лучше так и оставить
data-wow-delay="5s" // задержка перед началом анимации. Можно использовать если есть несколько однотипных элементов с одинаковой анимацией, чтобы они анимировались один за другим
data-wow-offset="10" // на сколько пикселей должен прокрутиться сайт, чтобы началась анимация. Оптимально 150-200 рх, а по умолчанию 0. То есть это значение лучше менять.
data-wow-iteration="10" // количество повторений анимации. По умолчанию 1, так и оставим.
Если хотим указать постоянные настройки, например, всегда начинать анимацию, когда сайт прокрутится на 150 рх. или всегда отключить анимацию на мобильных телефонах, код в custom.js будет таким (скопирован с гитхаба)
var wow = new WOW(
{
boxClass: 'wow', // animated element css class (default is wow)
animateClass: 'animated', // animation css class (default is animated)
offset: 150, // distance to the element when triggering the animation (default is 0)
mobile: false, // trigger animations on mobile devices (default is true)
live: true, // act on asynchronously loaded content (default is true)
scrollContainer: null // optional scroll container selector, otherwise use window
}
);
wow.init();
Здесь такие изменения:
callback удалены, они нам не нужны;
offset: был 0 стал 150;
mobile: был true стал false.
Редактирование animate.css
Оставляем общие классы, и те эффекты, которые использовали.
Самые подходящие fadeInRight, fadeIn, fadeInLeft
Можно посмотреть bounce, bounceIn, flipInX (для заголовков).