Сайты с параллаксом и анимацией при скроллинге все чаще встречаются в сети. Именно поэтому мы собираемся показать вам несколько практических примеров для их реализации.
Основная идея
Чаще всего эти сайты строятся с помощью JavaScript/jQuery библиотек. Наиболее известными из них являются Scrollr, scrollMagic, Parallax.js, scrollReveal.js. Мы собираемся использовать популярную и работающую на мобильных устройствах библиотеку Scrollr.
Чтобы использовать Scrollr, необходимо скачать его и создать на него ссылку в вашем HTML. После этого вызовите skrollr.init();
для активации плагина для всех элементов на странице.
<script src="assets/skrollr.min.js"></script>
<script>
skrollr.init();
</script>
Библиотека является очень мощной и вы можете создавать с ее помощью все виды анимаций при прокрутке страницы сайта.
Хотите узнать, как это было сделано? Продолжайте читать!
Введение в Scrollr
После того, как у вас подключена библиотека Scrollr на вашей странице, вы добавляете data-атрибуты элементов, которые вы хотите анимировать, пока страница прокручивается. Вот пример, который изменяет фон блока DIV с синего на красный:
<div data-bottom-top="background-color: rgb(255,0,0);"
data-center-center="background-color: rgb(0,0,255);">
</div>
У нас есть простой DIV с парой атрибутов. Первый атрибут отвечает за начало, а второй - за ее конец. Как вы можете видеть, сама анимация осуществляется с помощью CSS свойств (обратите внимание, что вы должны указать цвета как RGB).
Используя эти data-атрибуты, вы можете создать различные виды интересных эффектов. Ниже мы разберем несколько практических примеров, которые показывают, что вы можете сделать.
Введение в параллакс
Пожалуй, параллакс – нынче самая популярная анимация прокрутки. Он состоит из огромного, неподвижного изображения, занимающего весь фон, определенную часть которого мы видим в зависимости от того, насколько далеко вниз мы пролистали страничку.
Помимо того, что параллакс является изображением, встроенным в класс wrapper, у него также есть переходы с разной скоростью и даже своя CSS.
Основной текст
Здесь мы имеем три инлайновых абзаца, которые появляются один за другим. Мы это сделали с помощью смещений, которые как бы говорят библиотеке начать анимацию раньше, чем, по идее, нужно.
Характеристики
Характеристики - то самое место, где вы можете продемонстрировать на что способен ваш продукт. Большие иконки и текст, конечно, должны быть, но вы также можете оживить их привлекательными анимациями. В нашем примере они будут появляться с разных сторон экрана.
О нас
Наш пример раздела "О нас" состоит из больших круглых аватарок, выровненных на двух строках. Изображения в первой строке вращаются по часовой стрелке, а те, что на втором ряду, вращаются по вертикали.
Галерея
Мы подготовили прекрасный пример анимации прокрутки для нашей галереи. Она состоит из набора изображений, расположенных в два ряда. Первый ряд перемещает изображения справа налево, а второй движется в противоположном направлении. Эта анимация при выполнении занимает некоторое время, и, если мы не хотим, чтобы галерея закончилась без перехода, мы ненадолго остановим прокрутку.
Подвал
В футере мы сделали чтобы при скроллинге увеличивался размер поисковой формы.
Надеюсь, вы получили истинное наслаждение, изучая наши примеры! Это лишь малая часть того, что вы могли узнать о Skrollr из нашего урока. Не поленитесь и изучите документацию к этой библиотеке, чтобы очаровать посетителей вашего сайта необычной анимацией.