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

Я уже говорил, что плохо знаю javascript (в процессе изучения), и самому реализовать данный функционал мне не удалось. Но к счастью я нашел готовое решение на другом сайте. Придумал его Артем Анашев, один из авторов на блоге loftblog.ru. Там материал, по этой теме, представлен исключительно в видеоформате, я же попробую описать все в текстовом и выложить свой исходинк. Если вам удобнее смотреть именно видеоматериал, то в конце статьи можете ознакомиться с оригиналом 🙂

Как и в прошлый раз скачиваем и подключаем библиотеку animate.css, там же можно подбирать тип анимации в удобном визуальном исполнении:

В данной статье я буду использовать не оптимизированную версию библиотеки annimate.css, но вам рекомендую подключать именно animate.min.css, скачанную с github. Так как эта версия меньше весит, а соответственно будет грузиться быстрее.

Я поместил ее в папку «css», поэтому получился следующий путь:

Теперь необходимо подключить jquery и плагин waypoints, который поможет нам прокручивать анимацию в обе стороны:

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

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

Внимание! Тестировать эффект необходимо на локальном или внешнем сервере. В противном случае анимация не будет проигрываться.

Анимация при скролле в обе стороны — html разметка

Я создал класс «box», в котором буду хранить свои изображения.

Здесь нет ничего особенного, просто задаю ширину и высоту области, в которой буду хранить иконки. Делаю отступ слева 50px и выравниваю по левому краю. Этот блок сугубо индивидуален и можете не обращать на него внимание. Просто под мой макет лучше всего подходили именно эти параметры. Идем дальше.

Для того, чтобы проигрывалась анимация необходимо добавить класс animated. Его свойства прописаны в библиотеке animate.css, которую мы подключили ранее.

Класс boxHidded, нужен для того, чтобы сделать, в начальный момент времени наши иконки полностью прозрачными. Это подразумевает логика нашего скрипта. Ведь иконки, при прокрутке должны плавно появиться, а затем также плавно исчезнуть.

Класс delay-05s и delay-1s отвечает за задержку в проигрывании анимации на 0.5 секунды и 1 секунду соответственно. Давайте рассмотрим свойства, заданные этим классам:

На этом работа с таблицей стилей закончена, нам осталось перед закрывающимся тегом body разместить следующий скрипт

Обратите внимание на строки:

В них мы добавляем и удаляем классы, отвечающие за стили анимации, которые будут проигрываться при прокрутке. В данном случае fadeInUp и fadeOutDown. Вы можете выбрать любые виды анимации, представленные на официальной страничке библиотеки animate.css.

Чтобы изменить момент, в который должна начать проигрываться анимация — изменяйте значение offset. В данном случае задано 80%. Как я понял, это расстояние от верхней точки экрана, до блока, который анимируем.

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

В данном случае — эта проблема решена. Первый offset отвечает за старт анимации. А второй за исчезновение блоков. То есть, когда становится не видно 50 пикселей анимированого контента. Попробуйте! На примере вы все поймете.

Рекомендую вам посмотреть видео. В нем автор более подробно объяснит все тонкости реализации данного метода.

А на сегодня — все. Надеюсь данная статья была вам полезна и создание лендинг пейдж превратиться в удовольствие 🙂 Пока!

P.s. Waypoint обновился до версии 3.0, поэтому качать с Github смысла нет. Я не вникал, но похоже изменения оказались настолько кардинальными, что данный скрип не работает корректно с новой версией. Поэтому в исходнике лежит версия 2.0. С ней все работает отлично.

Кстати, есть способ заставит любой браузер осуществлять плавную прокрутку. Смотрится намного приятнее стандартного скролла.

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

Ссылка на сайт: https://michalsnik.github.io/aos

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

Как подключить скрипт?

Через CDN подключим два файла в HTML-документ.

Между тегами head вставляем ссылку на файл стилей, с библиотекой самих анимаций.

Перед закрывающим тегом body вставляем ссылку на файл скрипта.

Создаем пустой JS файл, например main.js и инициализируем AOS скрипт. Прописываем данный код внутри файла без настроек.

Сам файл, подключаем, перед закрывающим тегом body.

Добавляем настройки

Ссылка на GitHub: https://github.com/michalsnik/aos

Копируем и вставляем этот код в main.js

Однако не все опции вам будут нужны, рассмотрим самые основные, что можно дополнительно настроить.

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

Было бы разумно начинать анимацию элемента, при некотором количестве пикселей от низа страницы. Пользователь начинает скролить страницу и элемент анимируется, например, только через 100 пикселей от низа, позволив ему появится полностью.

По необходимости можно задержать начало исполнения анимации.

delay: 50, // значение от 0 до 3000, с шагом 50мс

Можно поиграться со скоростью анимации.

duration: 400, // значение от 0 до 3000, с шагом 50мс

С какого места страницы начинать анимацию, по умолчанию стоит сверху-вниз.

anchorPlacement: ‘top-bottom’, // top-center, top-top

Вызов анимации

Прописываете какому-нибудь элементу на сайте, атрибут data-aos со значением — название выбранной анимации.

Полный список названий анимаций, есть на GitHub.

Как добавлять свои анимации?

В библиотеке скрипта не так много анимаций. Можно выбрать недостающую вам анимацию на сервисе animista.

Рассмотрим на примере rotate.

Копируете оттуда код выбранной анимации и даете название классу.

[data-aos="new-rotate"] <
transform: rotate(0);
>

[data-aos="new-rotate"].aos-animate <
transform: rotate(360deg);
>

Прикручиваете анимацию к элементу на странице.

Демонстрация примера

В примере всем секциям поочередно применяли анимации.

Заключение

Скрипт AOS работает на нативном JS, по сути, он заменяет популярную связку animate.css + wow.js, делающую аналогичную анимацию при скролле.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):

    • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2019 Русаков Михаил Юрьевич. Все права защищены.

    vinnichenko.net

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

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

    Что понадобится и как это будет работать.

    Для начала нам нужна готовая страница (как банально, да?). Дальше нам понадобится очень чудный инструмент Animate.css. Посмотреть, как он работает и скачать его можно тут. После того, как наиграетесь с анимациями, которые нам предоставляет Animate.css, скачивайте его и подключайте к своей странице в head:

    Уже сейчас можно пробовать создавать css-анимации различных элементов вашей страницы. Это можно сделать, добавив к элементу пару классов:

    Класс animate говорит нашему инструменту Animate.css, что именно этот элемент будет анимированым. Второй класс fadeInLeft говорит, какая именно анимация будет применена. Все типы css анимаций вы уже видели, когда игрались с выпадающим списком на сайте Animate.css. Думаю, аналогию провести не составит труда.

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