Всем привет. Кто-то из вас, уже читал статью о том, как сделать 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.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Она выглядит вот так:
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2019 Русаков Михаил Юрьевич. Все права защищены.
vinnichenko.net
Сейчас существует много красивейших сайтов, в которых реализована анимация элементов. Но особо привлекательно выглядят те, у которых при прокручивании страниц анимируются те элементы, которые попали в поле видимости.
Такой прием часто используется в лендинг страницах, так как лучше css анимацию при скролле создавать для длинных (высоких) страниц.
Что понадобится и как это будет работать.
Для начала нам нужна готовая страница (как банально, да?). Дальше нам понадобится очень чудный инструмент Animate.css. Посмотреть, как он работает и скачать его можно тут. После того, как наиграетесь с анимациями, которые нам предоставляет Animate.css, скачивайте его и подключайте к своей странице в head:
Уже сейчас можно пробовать создавать css-анимации различных элементов вашей страницы. Это можно сделать, добавив к элементу пару классов:
Класс animate говорит нашему инструменту Animate.css, что именно этот элемент будет анимированым. Второй класс fadeInLeft говорит, какая именно анимация будет применена. Все типы css анимаций вы уже видели, когда игрались с выпадающим списком на сайте Animate.css. Думаю, аналогию провести не составит труда.
Данные css анимации будут воспроизводиться сразу после загрузки страницы. Можно, конечно, кастомизировать, делать их бесконечными, и т. д., но это уже тема для другого поста.