Технически при загрузке страницы указанному элементу назначаются inline-стили style=»visibility: hidden; animation-name: none;» , то есть элемент скрыт и не имеет имени анимации, а после того, как элемент появляется в видимой области окна браузера, элементу добавляется специальный класс animate__animated , который запускает анимацию и inline-стили меняются на style=»visibility: visible; animation-name: fadeInUp;» , где fadeInUp — имя анимации из animate.min.css
Что нужно для анимации при прокрутке
Animate.css — css-библиотека с анимациями
wow.js — плагин для запуска анимации
Скачиваем и подключаем Animate.css
Чтобы скачать css-файл с анимациями, переходим на Github https://github.com/animate-css/animate.css
Ищем файл animate.min.css и нажимаем на него
Ищем кнопку Raw — нажимаем
Сохраняем исходный файл animate.min.css в папку с css-файлами
Подключаем файл animate.min.css внутри тега до основного css-файла
Расставляем необходимые классы из Animate.css
Предположим, хотим задать анимацию, для блока
Смотрим на сайте https://animate.style/ какая анимация нам подходит и нажимаем на иконку копирования рядом с именем анимации
Предположим выбрали эффект анимации bounceIn — копируем класс этого эффекта animate__bounceIn и добавляем этот класс блоку, который хотим анимировать
Пока что мы добавили блоку только класс эффекта, поэтому пока сама анимация работать не будет. За саму анимацию отвечает класс animate__animated , он будет добавлятся автоматически при прокрутке страницы с помощью wow.js
Скачиваем и подключаем wow.js
Ищем файл wow.min.js и нажимаем на него
Ищем кнопку Raw — нажимаем
Сохраняем исходный файл wow.min.js в папку с js-файлами
Подключаем файл wow.min.js перед закрывающим тегом
до основного js-файла
Инициализация wow.js
Теперь, чтобы анимация срабатывала при прокрутке страницы, блоку, который мы хотим анимировать, добавляем класс wow
Далее в файле main.js инициализируем wow.js
const wow = new WOW(< boxClass: 'wow', /* класс, который необходим для работы wow.js */ animateClass: 'animate__animated', /* класс, который будет автоматически добавляться анимируемым элементам при прокрутке страницы */ offset: 30, /* по-умолчанию установлено значение 0, то есть как только при прокрутке страницы, элемент достигает низа окна браузера проигрываться анимация, в данном случае анимация начнется на 30px выше от низа окна браузера */ mobile: true, /* если true, то на мобильных тоже будет анимация, если false, то на мобильных анимация отключается */ live: true /* если true, то анимация будет работать даже на динамически добавляемых элементах, если false, то только на тех элементах, которые были на странице при ее загрузке */ >) wow.init(); /* Инициализация плагина с установленными выше свойствами */
Еще раз, кратко, порядок действий
Скачиваем animate.min.css и подключаем в до основного css-файла
Скачиваем wow.min.js и подключаем перед закрывающим тегом до основного js-файла
Блокам, которые будем анимировать добавляем класс wow и класс с эффектом, например animate__bounceIn
В основном js-файле устанавливаем свойства и инициализируем плагин wow.js
Дополнительные возможности wow.js
Для более тонкой настройки анимации каждого отдельного блока есть дополнительные data-атрибуты
data-wow-duration — продолжительность анимации (использую, если нужно сделать продолжительность анимации быстрее или медленней)
data-wow-delay — задержка перед началом анимации (использую, если несколько блоков в ряд и необходимо чтобы они появлялись не все сразу, а по очереди друг за другом)
data-wow-offset — расстояние в пикселях от низа окна браузера, на котором начнется анимация элемента(обычно не использую)
data-wow-iteration — количество повторений анимации (обычно не использую)
Можно использовать несколько data-атрибутов одновременно
Использовать очень просто, например, необходимо чтобы элементы расположеные в ряд появлялись не все сразу, а по очереди друг за другом — добавляем первому блоку data-wow-delay=»0s» , второму data-wow-delay=».2s» , третьему data-wow-delay=».4s»
Lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est cumque enim ex laborum voluptatibus, nulla expedita facilis impedit ab possimus doloribus atque obcaecati voluptatem rem, maxime non suscipit. Aspernatur, similique.
Lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est cumque enim ex laborum voluptatibus, nulla expedita facilis impedit ab possimus doloribus atque obcaecati voluptatem rem, maxime non suscipit. Aspernatur, similique.
Lorem ipsum dolor.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est cumque enim ex laborum voluptatibus, nulla expedita facilis impedit ab possimus doloribus atque obcaecati voluptatem rem, maxime non suscipit. Aspernatur, similique.
Когда страница прокрутится до этих элементов, то у первого блока анимация начнется сразу, у второго через 0.2 секунды, у третьего через 0.4 секунды
Анимация при прокрутке страницы с библиотекой AOS js
Фронтенд разработчики часто сталкиваются с тем, что клиенты просят реализовать на сайте какие-то потрясающие эффекты — анимацию при прокрутке страницы. Да, конечно, можно такие эффекты создать на CSS самостоятельно, потратив несколько часов на попытки сделать достойную анимацию. Но для этих целей уже создано множество готовых библиотек. И одна из лучших — это Animate On Scroll или AOS js
Быстрая навигация
# Установка AOS.js
# Анимация элементов при скролле с AOS
# Кастомизация анимации при прокрутке страницы
# Больше возможностей
В этой статье вы узнаете о том, как установить эту библиотеку и заставить ее работать. К концу урока создание анимации при скролле станет для вас плёвым делом.
1 Установка AOS.js
На выбор есть несколько вариантов установки. Можно скачать, использовать CDN или установить библиотеку через YARN, NPM либо BOWER
Подключаем с помощью CDN
CDN (Content Delivery Networks) подразумевает, что что вам не нужно скачивать библиотеку, она хранится на удаленных серверах. Все что нужно сделать — это подключить ее CSS и JS файлы к себе на станицу.
HTML .
Установка с помощью YARN, NPM, BOWER
YARN yarn add aos NPM npm install aos --save BOWER bower install aos --save
Вот и все, больше ничего делать не нужно. Производительность нашего сайта особо не пострадала.
Чтобы инициализировать AOS достаточно написать в HTML или лучше в отдельном JavaScript файле следующую строчку:
HTML
2 Анимация элементов при скролле с AOS
После инициализации библиотеки нам нужно добавить к элементам, которые мы собираемся анимировать при прокрутке, некоторые атрибуты.
Для базовой анимации впишите в ваш HTML элемент атрибут data-aos=»название_анимации»
Разработчики Animate On Scroll создали много типов анимации, которые вы можете выбрать для своего блока. К примеру, при появлении/исчезновении элемента можно добавить анимации: «fade», «fade-up» или «fade-down-left». Или же добавить анимацию флипа и слайда «flip-up», «flip-left», «slide-down» и «slide-right».
Уже выходит неплохо, а ведь кроме строки инициализации нам не пришлось написать ни строчки js кода. Рассмотрим все базовые возможности AOS.js:
Fade эффекты
data-aos= «fade-down»
HTML
.
Лучшие примеры CSS-анимации при прокрутке веб-страницы
Ваша главная задача при создании веб-сайта — это обеспечить его максимальную производительность и создать лучший пользовательский опыт для вашей аудитории. Помимо этого ваш сайт должен быть интерактивным, привлекательным и стильным.
Чтобы оживить ваш сайт, помимо стандартных изображений и видео на странице, вы можете создать дополнительное движение с помощью анимации прокрутки. В этой статье мы расскажем вам о том, что такое CSS-анимация, а также рассмотрим интересные примеры для вашего вдохновения.
Что такое CSS-анимация при прокрутке?
CSS-анимация — это появление анимированного текста, изменение цвета объектов или подпрыгивание элементов, которые появляются у пользователей на экране при прокрутке вашей страницы вниз или вверх. С помощью CSS-анимации вы можете использовать плавные переходы между состояниями, создавать сложные многоэтапные анимации и даже анимировать элементы SVG — и все это без использования сложного кода JavaScript.
CSS-анимация работает таким образом, что при прокрутке веб-страницы вверх и вниз запускается анимация, как только элемент попадает в поле зрения. Внезапное движение может заинтересовать вашего пользователя и удержать его на странице.
Примеры CSS-анимации
Теперь, когда вы знаете, как работает CSS-анимация, давайте рассмотрим конкретные примеры сайтов, которые эффектно используют анимацию прокрутки.
Gucci Hallucination
Известный модный бренд Gucci умело использует анимацию прокрутки на своей веб-странице. Анимация помогает оживить изображения на сайте и привлечь внимание пользователей — анимированные изображения хочется бесконечно разглядывать.
Year In Review
Digital and Motion создает смелые визуальные эффекты с помощью CSS-анимации при прокрутке. С помощью такой анимации Digital and Motion удалось создать визуальную капсулу времени за 2018 год. Прокручивая вверх и вниз, вы словно путешествуете по их воспоминаниям из 2018 года.
Fiji Water
Известный бренд воды Fiji в качестве темы для своего веб-сайта использует изображения природы. Прокручивая вверх и вниз, вы можете увидеть, как оживают и двигаются облака, и с каждой прокруткой вы перемещается все ниже в глубину вод.
Как создать CSS-анимацию при прокрутке
Вы создаете веб-страницу и застряли в раздумьях, как сделать ее более удобной для читателя? Если вы хотите добавить интерактивности вашей веб-странице, CSS-анимация при прокрутке поможет вам в этом. Конечно, вы можете добавить фотографии и видео, чтобы помочь воплотить ваше видение в жизнь. Однако CSS-анимация может добавить дополнительное движение и удержать внимание посетителей. Самое главное, что их относительно легко создать. В этом посте вы узнаете, что такое CSS-анимация при прокрутке, как анимировать CSS при прокрутке, а также полезные примеры. С помощью всего нескольких строк кода вы сможете быстро создать великолепно выглядящую анимацию. Давайте приступим!
Содержание скрыть
Что такое CSS-анимация при прокрутке?
Представьте, что вы хотите привлечь внимание читателя при прокрутке веб-страницы вверх и вниз – например, анимировать текст, изменить цвет элементов или сделать их прыгающими. С помощью CSS-анимации вы можете использовать плавные переходы между состояниями, создавать сложные многоступенчатые анимации и даже анимировать элементы SVG – и все это без использования сложного кода JavaScript. Вы можете активировать эти анимации, создавая CSS-анимации при прокрутке. Когда читатели прокручивают веб-страницу вверх и вниз, анимация включается, как только элемент попадает в поле зрения. Внезапное движение элементов будет удерживать читателя. Это происходит потому, что наши глаза привлекают изменения в поведении объектов. Всего лишь небольшое движение и изменения могут оживить вашу страницу.
CSS на прокрутке в действии
Теперь, когда вы знаете, на что способна анимация CSS, давайте посмотрим на живые веб-страницы, использующие анимацию прокрутки.
Роскошный модный бренд Gucci использует анимацию прокрутки на всей своей веб-странице. Анимация оживляет их искусство. Пока вы прокручиваете веб-страницу вверх и вниз, ваши глаза будут сосредоточены на анимации.
Digital and Motion создает смелые визуальные образы с помощью CSS-анимации на прокрутке. Посмотрите на их визуальную капсулу времени на 2018 год. Прокручивая страницу вверх и вниз, вы путешествуете по их году воспоминаний.
Бренд воды Fiji создает визуальные образы природы в качестве темы для своего веб-сайта. Прокручивая страницу вверх и вниз, можно увидеть, как оживают облака. Вы также можете увидеть, как капли дождя падают с того, что кажется небом. Нам нравится, как эта анимация сочетается с брендингом компании.
Как анимировать CSS при прокрутке
Теперь, когда вы знаете о преимуществах использования CSS-анимации прокрутки, давайте создадим несколько.
Начните с HTML-кода.
Для создания CSS-анимации прокрутки мы начнем с HTML. Создайте простую веб-страницу и дайте элементам имена классов. В примере ниже вы увидите четыре div, которым присвоено одно и то же имя класса – “fade-in”.
Создайте CSS.
Далее вы создадите CSS. Именно здесь вы будете управлять анимацией и эффектами прокрутки. В данном примере класс active добавляется к изображению по мере его прокрутки в область просмотра. Атрибут transform придает веб-странице динамичность, а атрибут translation определяет время загрузки.
Наконец, вы создадите наблюдателя пересечений с помощью нескольких строк JavaScript.
Построение наблюдателя пересечений с помощью JavaScript.
Первым шагом будет захват элементов с помощью querySelectorAll.
Затем создайте объект options. Установите для root значение null, которое устанавливает область просмотра в документ. Затем установите для root margin значение 0px, которое определяет стороны ограничивающего поля корня. Используйте порог для определения точки срабатывания элемента в зависимости от его видимости. В приведенном ниже примере триггер элемента установлен на момент, когда элемент виден на 40%.
Следующий шаг – создание функции обратного вызова. Функция обратного вызова принимает записи в качестве параметра. Вы можете использовать метод forEach для итерации по списку записей. Функция обратного вызова определяет, пересекается ли элемент в данный момент с корнем, и возвращает именно этот элемент.
Затем создайте наблюдателя пересечения, вызвав его конструктор. Затем вы передадите конструктору функцию обратного вызова и объект options.
Последний шаг – выбор элементов для наблюдения. Если у вас несколько элементов, вы упростите код, присвоив им общее имя класса и используя метод forEach для перебора каждого элемента, когда он входит или выходит из области просмотра.
Оживите свой сайт
Как видите, использование CSS-анимации при прокрутке предлагает простой и эффективный способ добавить движение и анимацию на ваш сайт или приложение. Вы можете создавать красивые, привлекающие внимание анимации с помощью CSS-анимаций прокрутки, которые реагируют на действия пользователя или события прокрутки. Кроме того, работать с CSS намного проще, чем с JavaScript – так что если вы ищете быстрый способ добавить жизни в свой веб-проект без написания кода с нуля, CSS – это то, что вам нужно! Попробуйте его сегодня.
