Анимация при прокрутке страницы

Технически при загрузке страницы указанному элементу назначаются inline-стили style=»visibility: hidden; animation-name: none;» , то есть элемент скрыт и не имеет имени анимации, а после того, как элемент появляется в видимой области окна браузера, элементу добавляется специальный класс animate__animated , который запускает анимацию и inline-стили меняются на style=»visibility: visible; animation-name: fadeInUp;» , где fadeInUp — имя анимации из animate.min.css

Что нужно для анимации при прокрутке

1. Animate.css — css-библиотека с анимациями
2. 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(); /* Инициализация плагина с установленными выше свойствами */ 

Еще раз, кратко, порядок действий

1. Скачиваем animate.min.css и подключаем в до основного css-файла
2. Скачиваем wow.min.js и подключаем перед закрывающим тегом до основного js-файла
3. Блокам, которые будем анимировать добавляем класс wow и класс с эффектом, например animate__bounceIn
4. В основном 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 секунды

Как запускать CSS-анимацию при прокрутке страницы

В этом пошаговом руководстве будет рассмотрено создание CSS-анимации с нуля и её включение при скролле (прокрутке вверх-вниз) страницы, когда HTML-элемент находится в поле зрения – видимой части окна, с помощью Intersection Observer API.

Настройка CSS-анимации с помощью ключевых кадров

Начнем с создания CSS-анимации, которая определяется ключевыми кадрами @keyframes .

@keyframes wipe-enter < 0% < transform: scale(0, .025); >50% < transform: scale(1, .025); >>

Анимацию можно назвать как угодно, пусть будет wipe-enter . Здесь HTML-элемент будет увеличиваться в ширину, а затем в высоту.

После того, как определены ключевые кадры, можно использовать анимацию для элемента, установив свойству animation-name название ключевых кадров: wipe-enter . Кроме этого необходимо установить animation-duration – продолжительность анимации и animation-iteration-count – счетчик итераций, указывающий, сколько раз анимация должна воспроизводиться, например – бесконечно.

@media (prefers-reduced-motion: no-preference) < .square < animation-name: wipe-enter; animation-duration: 1s; animation-iteration-count: infinite; >>

CSS-класс .square пусть будет заключён в медиа-запрос prefers-reduce-motion: no-preference . Это обеспечит запуск анимации только в том случае, если пользователь не ограничил её и не включил параметр «уменьшить движение» в своей операционной системе.

В этом примере будет анимирован HTML-элемент квадратной формы:

Для CSS-анимации можно использовать сокращённое написание свойства animation , например:

@media (prefers-reduced-motion: no-preference) < .square < animation: wipe-enter 1s infinite; >>

Управление анимацией с помощью CSS-класса

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

.square < width: 200px; height: 200px; background: #e62a52; // и т.д. >@media (prefers-reduced-motion: no-preference) < .square-animation < animation: wipe-enter 1s 1; >>

CSS-анимация будет воспроизводиться, когда HTML-элементу будет добавлен CSS-класс .square-animation :

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

Несмотря на то, что анимация должна показывать появление элемента, элемент отображается и до добавления класса .square-animation . Это сделано для того, чтобы при первой загрузке элемент был виден пользователю, даже если JavaScript заблокирован или не работает.

Добавление CSS-класса, когда элемент появляется при скролле (прокрутке страницы вверх-вниз)

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

Вот три способа определить, когда элемент находится в видимой области окна:

1. Использовать Intersection Observer API
2. Измерять смещение элемента при скролле страницы
3. Использовать стороннюю JavaScript-библиотеку, которая реализует №1 или №2

Для базовой анимации с запуском при скролле, оптимально использование Intersection Observer API, потому что он требует меньше кода, удобнее и лучше с точки зрения производительности.

API-интерфейс Intersection Observer позволяет отслеживать момент пересечения одного элемента с другим, и сообщает, когда это происходит. Этот способ идеально подходит для запуска CSS-анимации при скролле страницы. Всё, что нужно знать – когда HTML-элемент пересекается с окном просмотра. Если он пересекается, значит – находится в видимой области окна и в этот момент надо запустить CSS-анимацию.

Intersection Observer API можно рассматривать, как обычный слушатель событий, но с некоторыми дополнительными опциями. Вместо того, чтобы прикреплять прослушивание событий к HTML-элементу, надо заставить наблюдателя отслеживать элемент и его положение на странице.

Начнём с создания наблюдателя и заставим его отслеживать HTML-элемент:

// Создать наблюдателя const observer = new IntersectionObserver(entries => < // Заполним метод обратного вызова позже. >); // Сообщить наблюдателю, какие элементы следует отслеживать observer.observe(document.querySelector('.square'));

По умолчанию корневым элементом, который будет проверяться на пересечение, является окно браузера, поэтому наблюдателю нужно только сообщить об анимируемом HTML-элементе.

Когда функция обратного вызова (callback) запускается, она возвращает массив записей из целевых (target) элементов, которые были запрошены, а также некоторую дополнительную информацию о них. В функцию всегда будет возвращаться массив, даже если наблюдение ведётся только за одним элементом, как здесь.

В функции обратного вызова можно перебрать массив записей, чтобы указать, что с ними нужно сделать. Каждая запись имеет свойство isIntersecting , которое может быть true или false . Если оно возвращает true , это означает, что элемент находится в видимой области окна (viewport).

entries.forEach(entry => < if (entry.isIntersecting) < // Элемент появился, // надо добавить CSS-класс для анимации >>);

Собираем всё вместе. Обратите внимание, что entry – это объект, предоставленный наблюдателем, а entry.target – это фактический элемент, за которым который ведется наблюдение, поэтому именно ему нужно добавить CSS-класс для запуска анимации.

const observer = new IntersectionObserver(entries => < // перебор записей entries.forEach(entry => < // если элемент появился if (entry.isIntersecting) < // добавить ему CSS-класс entry.target.classList.add('square-animation'); >>); >); observer.observe(document.querySelector('.square'));

Теперь, когда HTML-элемент пересекает границы окна браузера, ему будет добавлен CSS-класс, который будет воспроизводить анимацию.

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

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

Теперь надо наблюдать за HTML-элементом c CSS-классом square-wrapper а класс для анимации применять к элементу с классом square , как и прежде. Когда элемент-оболочка находится за пределами видимой области, нужно удалять CSS-класс у элемента .square , чтобы анимация перезапускалась каждый раз, когда элемент появляется в окне при скролле.

const observer = new IntersectionObserver(entries => < entries.forEach(entry => < const square = entry.target.querySelector('.square'); if (entry.isIntersecting) < square.classList.add('square-animation'); return; // если класс добавлен, продолжать уже не надо >// перемещение завершено, теперь надо удалить класс square.classList.remove('square-animation'); >); >); observer.observe(document.querySelector('.square-wrapper'));

Чтобы элемент-оболочку было видно, для примера, ему добавлена пунктирная рамка. Попробуйте прокрутить вверх и вниз документ в окне ниже:

Теперь – порядок! Добавляя и удаляя CSS-класс каждый раз, когда при скролле страницы HTML-элемент входит в область просмотра, запускается CSS-анимация.

Запуск CSS-transition при скролле

Если для анимации используется только один шаг и не требуется применение @keyframes , например, достаточно изменения прозрачности HTML-элемента от 0 до 1, можно использовать CSS-transition вместо CSS-animation.

Метод по сути тот же. Вместо определения ключевых кадров ( @keyframes ) для CSS-класса анимации указаны свойства для transition .

.square < width: 200px; height: 200px; background: #e62a52; border-radius: 8px; opacity: 0; transform: scale(1.2); >@media (prefers-reduced-motion: no-preference) < .square < transition: opacity 1.5s ease, transform 1.5s ease; >> .square-transition

Заставим HTML-элемент появляться, когда он перемещается в видимую область просмотра. Для этого в момент появления в окне при скролле ему надо добавить CSS-класс square-transition . Так пользователь, у которого заблокирован или не загружается JavaScript, должен всё-равно увидеть HTML-элемент в его окончательном состоянии.

Это особенно важно, поскольку анимация начинается с opacity: 0 . Если бы не было настройки CSS-класса square-transition и JavaScript не работал, пользователь вообще не увидел бы HTML-элемент! Но если эффект перехода заключается в том, чтобы что-то исчезло, наверное, это не понадобится делать.

При первом запуске JavaScript нужно удалить CSS-класс, чтобы затем, его можно было добавить обратно, когда действительно нужно запустить transition . Это должно быть сделано вне метода обработки наблюдения за скроллом, желательно в начале JavaScript. Вот полный код:

// Удалить CSS-класс square-transition const square = document.querySelector('.square'); square.classList.remove('square-transition'); // Добавить наблюдение за появлением элемента const observer = new IntersectionObserver(entries => < entries.forEach(entry => < if (entry.isIntersecting) < square.classList.add('square-transition'); return; >square.classList.remove('square-transition'); >); >); observer.observe(document.querySelector('.square-wrapper'));

В этом примере CSS-transition запускается, когда элемент-оболочка при скролле появляется в окне. Если Javascript не запустился, элемент всё-равно будет виден.

Как видите, эту технику можно расширять разными способами, чтобы создать множество эффектов анимации.

Простая анимация при прокрутке страницы

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

Анимация при прокрутке без jQuery

Сделать простую анимацию на странице с помощью animate.css и wow.js очень быстро и просто.

animate.css — css-библиотека, содержащая классы, которые позволяют выполнять анимацию элементов. Скачать библиотеку можно с официального сайта, или можно подключить библиотеку через CDN:

wow.js — javascript-библиотека, позволяющая запускать анимацию при прокрутке страницы. Скачать можно на GitHub, или можно подключить библиотеку через CDN:

Для работы анимации и скрипта wow.js библиотека jQuery не требуется.

Как сделать анимацию на странице при прокрутке

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

1. Подключаем css библиотеку animate.sss

2. Подключаем и активируем wow.js

3. Добавляем классы к элементам для анимации

 
Пример простой анимации при прокрутке страницы
 

bounceInUp — название css-класса для анимации элемента из библиотеки animate.css, который вы заменяете на тот, который вам необходим.

Изначально html-элементы с классом «wow» скрыты, в когда пользователь прокручивает страницу до элемента, он появляется на странице с анимацией. Если элемент уже сразу при загрузке попадает в видимую область страницы, тогда анимация запустится сразу же.

Настройки wow.js

Библиотека анимации при прокрутке имеет несколько опций, которые добавляются к тегу в виде data-атрибутов.

data-wow-duration — продолжительность анимации

data-wow-delay — задержка перед началом анимации

data-wow-offset — расстояние в пикселах от нижнего края окна браузера до элемента, при достижении которого начнется анимация

data-wow-iteration — повторять анимацию несколько раз

 
Анимация начнется через 5 сек и будет длиться 2 сек
 

Так же можно указать несколько опций при активации wow.js

boxClass — имя класса, которое делает элементы невидимыми и показывает их при прокрутке страницы пользователем (по умолчанию «wow»).

animateClass — имя класса, запускающего анимацию элемента (для библиотеки animates.css это имя класса «animated»)

offset — расстояние в пикселах от нижнего края окна браузера до элемента, при достижении которого начнется анимация (аналогично data-wow-offset, но для всех анимируемых элементов).

mobile — отключает анимацию для смартфонов

live — постоянно проверять появление новых элементов для анимации на странице

callback — функция, которая будет запускаться при старте анимации. При этом в функцию передается ссылка на объект, который анимируется.

scrollContainer — селектор прокручивающегося контейнера (по умолчанию «window»)

wow = new WOW(< mobile: false, // не запускать анимацию на смартфонах live: true // всё время проверять появление новых wow-элементов >); wow.init();

Пример анимации при прокрутке страницы

Приведу более полный пример, показывающий возможности wow.js и animate.css

     
 
 
Первый заголовок анимируется сразу
 
Крутите страницу ниже
 
И еще ниже.
 
 
 
Второй заголовок
 
 
 
Третий заголовок
 
 
    

Анимация при прокрутке с использованием jQuery

Если использовать библиотеку jQuery, можно сделать анимацию самостоятельно с нужным алгоритмом. При этом для определения момента запуска анимации можно пойти 2 путями:

• запускать анимацию, когда прокрутили страницу на определенное кол-во пикселей
• запускать анимацию, когда прокрутили страницу до нужного элемента

Пример запуска анимации первым вариантом:

var animate_point1 = 500; // первая точка запуска анимации var animate_point2 = 1000; // вторая точка запуска анимации $(window).scroll(function() < if ($(this).scrollTop() >animate_point1) < // первая анимация >if ($(this).scrollTop() > animate_point2) < // вторая анимация >>);

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

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

Пример анимации при прокрутке до элемента:

var element_point = $('#animated_element').offset().top; // положение элемента относительно начала страницы var element_animated = false; // чтобы анимация происходила только один раз, используем эту переменную-флаг var animate_delay = 100; // задержка анимации (через 100 пикселей) $(window).scroll(function() < // проверяем, прокрутили ли страницу до элемента if (!element_animated && $(window).scrollTop() + window.innerHeight >element_point + animate_delay) < element_animated = true; // отмечаем, что анимация выполнена // анимация >>);

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

Пример анимации при прокрутке с использованием jQuery

    
 
Крутите страницу ниже
 
И еще ниже.
 
 
 
Анимация
 
 
    

Анимация при прокрутке страницы

Здравствуйте, дорогие друзья! Долго готовил материал сегодняшней статьи и постарался подать его максимально подробно. Надеюсь, после прочтения у вас больше не останется вопросов о том, как делается CSS-анимация при прокрутке страницы.
Сразу хочу предупредить: мы не будем сами писать скрипты или что-то подобное (блог ведь рассчитан на новичков, и нам необходимо, чтобы легко подключалось и безотказно работало).

СSS-анимация при прокрутке страницы

Для работы нам понадобится скачать несколько инструментов.

CSS-анимация при прокрутке страницы

Скачать исходник
Ссылка на скачивание появится через сек. А пока, поддержи, пожалуйста, лайком!

В первую очередь – это файл animate.css – библиотека, в которой прописаны стили для анимации элементов на странице. Для того, чтобы визуально оценить и выбрать вид анимации, обычно, я использую страничку ресурса http://daneden.github.io/animate.css/

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

Далее необходимо подключить таблицу стилей. Для этого копируем файл animate.css в папку с таблицами стилей вашего сайта. У меня – эта папка так и называется «css». А в файле «index.html», между тегами head прописываем:

Теперь необходимо задать класс элементу, который хотим с анимировать, с соответствующим названием, которое выбрали на предыдущем шаге. То есть стиль bounceInRight, показанный на скриншоте выше – будет являться классом для элемента, который будем анимировать. А также класс animated, для того, чтобы анимация проигрывалась. Надеюсь понятно объяснил? Если нет, то на примере ниже — это предельно просто!

Теперь, при обновлении страницы будет проигрываться анимация. Можете попробовать, нажав кнопку f5.

Правда круто? Но на этом процесс создания анимации не закончен, ведь нам необходимо сделать так, чтобы проигрывание анимации происходило при прокрутке страницы, а не сразу после ее загрузки!

Для этого нам придется воспользоваться готовым скриптом wow.js. Его необходимо поместить в папку js основного каталога вашего сайта. Я выложил только сжатый вариант, потому что он меньше весит и быстрее грузиться. Полностью ознакомиться с проектом можно
здесь.

Итак, для того, чтобы анимация элементов происходила при прокрутке страницы, необходимо в файл index.html, между тегами head добавить следующие 2 строки:

А также, классу bounceInRight, вместо animated необходимо добавить wow. Должно получиться следующее:

Как видите, первая анимация проигрывается сразу после загрузки страницы, а вторая, только при прокрутке, когда ее видит пользователь. В то время как первую – не заметит, если она расположена не на первом экране.
Можно сделать вывод, что процесс создания такой анимации сводиться к 5 минутам потраченного времени. Все что нужно сделать, это:

• Дописать 3 строчки кода между отрывающимся и закрывающимся тегом head.
• Скопировать файл animate.css и wow.min.js в соответствующие папки.
• Добавить класс wow и класс с названием анимации элементу, который хотим с анимировать

И все, ваш сайт будет смотреться гораздо живее и эффектнее. А в случае продажи – дороже.

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

• data-wow-offset: Дистанция от нижнего края браузера для начала анимации;
• data-wow-duration: Изменение длительности анимации;
• data-wow-delay: Задержка перед стартом анимации;
• data-wow-iteration: Сколько раз повторять анимацию?

А на сегодня все, до встречи на smartlanding. Оставляйте свои комментарии и задавайте вопросы! Пока!

P.s.: Если вы хотите сделать так, чтобы анимация проигрывалась при скролле в обе стороны, то рекомендую почитать вам эту статью

08/10/2022 Дмитрий Давыдов

165 комментариев

Разобралась теперь все работает. Чтобы подключить анимацию к сайту WordPress надо помимо загрузки в активную тему двух обозначенных файлов в файл function.php активной темы вставить следующий код:
//* Enqueue Animate.CSS and WOW.js add_action( ‘wp_enqueue_scripts’, ‘sk_enqueue_scripts’ ); function sk_enqueue_scripts() < wp_enqueue_style( 'animate', get_stylesheet_directory_uri() . '/css/animate.css' ); wp_enqueue_script( 'wow', get_stylesheet_directory_uri() . '/js/wow.min.js', array(), '', true ); >//* Enqueue script to activate WOW.js add_action(‘wp_enqueue_scripts’, ‘sk_wow_init_in_footer’); function sk_wow_init_in_footer() < add_action( 'print_footer_scripts', 'wow_init' ); >//* Add JavaScript before function wow_init() < ?>new WOW().init(); Ничего больше добавлять не нужно. На странице в режиме ТЕКСТ добавить к нужному элементу код, который приведен в этой статье. СПАСИБО АВТОРУ ЗА СТАТЬЮ. Может добавите в нее раздел как добавить анимацию на сайт вордпресс?

В firefox наблюдается баг http://mynameismatthieu.com/WOW/
обратите внимание на верхнее меню. Как это победить?

А что с ним не так? Не заметил бага.

Вот пример:
меню: clip2net.com/s/3pzV9kw
текст: clip2net.com/s/3pzVgzJ
Такой баг в firefox на винде, версия FF 41, на младших версиях такой же баг.

У меня 41.0.2 версия — и я ничего подобного, как на скриншотах не наблюдаю. Нормально все отображается и выезжает. Даже не знаю в чем может быть причина. Ну хотите, видео запишу? Правда нормально все. Да и должно быть нормально.

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

Добрый день! На ноутбуке работает все замечательно, а вот на планшете и телефоне есть траблы:
1. при загрузке страницы она открывается в середине
2. когда пытаюсь подняться к началу, весь контент сдвигается в лево.
Буду признателен за помощь

Ну вы уверены, что это именно из-за подключения файла annimate.css у вас страница открывается в середине? Таково быть не может, по идее

Спасибо. Благодаря Вам все получилось с первого раза.
zaxvatu.net

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

Добрый день!) А меня заинтересовал вопрос о лицензии. Судя по всему для коммерческого проекта надо только покупать за 29 долларов или за 99 долларов для неограниченного использования в комм проектах? Бесплатное использование не прокатит?

Да нет, там же написаны условия использования https://opensource.org/licenses/MIT
Тогда да, возможно, для использования в коммерческих целях придется приобрести.

Добрый день. Все отлично работает. Но есть одна проблема. При срабатывании анимации, когда элемент выезжает слева или с права, на мобильном устройстве (браузер Chrome) верстка страницы сужается на половину экрана (к примеру это справедливо для bounceInRight). Спасибо!

отдуши благодарю.
Спасибо огромное! Не думал что это так просто!
Ну да. Есть еще проще способы. Возможно, скоро добавлю на блог.

Добрый день! Подскажите, пожалуйста, как в Wow.js сделать такую штуку: если страница перезагружается в проскролленом состоянии, то при скролле вверх анимация не срабатывала и все элементы были статичны. А анимация была только при скролле вниз.
Не нашла в документации решения этой проблемы 🙁
Или подскажите библиотеки типа Wow, в которых это уже реализовано.
Спасибо.

А почему контент на который присваиваю класс анимации выводится поверх остального? (меню открывается под элементы с классом анимате)

Наверное, z-index — выше
Спасибо! Очень помогло!
Stephenlok

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

Есть проблема данной анимации на мобильных устройствах. То есть при быстром пролистывании видим просто пустые места, текст очень медленно после появляется. При чем задержки нулевые. В общем проблема в не сильно быстрых устройствах. Следовательно как можно определить такие устройства чтобы на них не подключать css и javascript?