Анимация на html-странице с помощью animate css и wow.js
Анимация типа @keyframes + свойство animation позволяют сделать анимированный логотип или баннер, красивый слайдер или выпадающее меню. Для того чтобы облегчить процесс создания самой анимации, вы можете использовать библиотеку animate.css, автором которой является Daniel Eden. Всю информацию о ней на английском языке вы найдете на сайте animate.style. Там же можно протестировать все виды анимации. На момент написания статьи существует animate.css версии 4.1.1, и она несколько отличается от предыдущей версии наименованием классов и использованием в коде css-переменных.
Подключение animate.css
Для того чтобы подключить animate.css, необходимо указать в блоке вашего html-документа ссылку на эту библиотеку на CDN:
Второй способ — скачать css-файл с Github-репозитория (несжатый файл animate.css или минифицированный файл animate.min.css), разместить ее в папке css вашего проекта и подключить аналогичным способом:
Animate.css можно загрузить с помощью npm или yarn и импортировать в ваш проект:
Классы для добавления анимации
С помощью animate.css вы можете добавить ряд анимаций-заготовок, которые реализованы в этой css-библиотеке в виде классов. Для удобства пользования все классы разбиты на группы с названиями, например, Bouncing entrances и Bouncing exits. Если вы внимательно присмотритесь к названиям классов плюс нажмете на них и посмотрите на анимацию, то наверняка заметите, что классы, имеющие In в названии (bounceIn, например), показывают появление объекта с анимацией, а те, которые имеют Out ( bounceOut) в названии, нужны для исчезающих объектов.
Для того чтобы применить анимацию из набора Animate.css, вам нужно к тем блокам в html-разметке, которые анимируются, добавить класс animate__animated , который отвечает за проигрывание анимации в течение 1 секунды, а также любой из классов, которые отвечают за вид анимации, например, animate__fadeInRight или animate__zoomInDown .
Анимация элемента при скроллинге | Комбинация animate.css и wow.js
Самый простой пример использования данной комбинации Вы можете наблюдать чуть ниже на этой странице. Самое интересное то, что эта красота (анимация при скроллинге) работает БЕЗ jQuery. Получается, что для данного скрипта открыты все двери. И как пример, скрольте вниз. Смелее.
С уверенностью могу Вам сказать, что сейчас анимация при скроллинге становится ОЧЕНЬ популярной, и данный эффект Вы можете часто встретить на продающих сайтах успешных интернет предпринимателей. Подобные «трюки» ОЧЕНЬ оживляют сайты, а также помогают сфокусировать внимание посетителя на тех важных моментах, которые Вы хотите, чтобы были замечены первым делом.
Анимация при скроллинге: комбинация «WOW.js» и «Animate.css» на WordPress.
* чтобы повторить анимацию, перезагрузите страницу.
Как настроить?
ШАГ 1 Для начала скачайте эти два файла («WOW.js» и «Animate.css»)
ОБНОВЛЕНО (25.июль.2019): wow.min.js v1.2.1 | animate.min.css v3.7.2 ШАГ 2 Помещаем папку «wow-animation» в корневую папку сайта. Конечно, Вы можете поместить ее в любое место, главное, чтобы путь к файлам Вы указали правильный. Желательно все же поместить эту папку в корневую папку: index.html. Если это WordPress, то поместите папку куда хотите. (главное — указать правильный путь к ней).
* Естественно, указываем правильный путь к файлу. Если устанавливаете на WordPress, то рекомендую указывать полный путь, т.е. начиная с httpS://ВашДомен и т.д. Чтобы проверить, правильно ли Вы подключили файл — скопируйте URL, введите в адресную строку и нажмите «Enter». Если откроется файл с непонятным кодом, значит все ок 🙂
* Тоже укажите правильный путь к файлу и проверьте в браузере.
ШАГ 5 Добавляем два класса для любого элемента, где: класс wow — подключение элемента к скрипту; класс fadeInRight — определенный стиль для анимации элемента. Часто используют: fadeInRight (Left/Up/Down) и bounceInRight (Left/Up/Down) Все стили Вы можете посмотреть здесь: Animate.css: Примеры анимаций
divclass="wow fadeInRight"> Определенная информация div>
ШАГ 6 Продвинутые настройки. Добавляем функции: data-wow-duration: Меняем продолжительность анимации; data-wow-delay: Задержка перед началом анимации; data-wow-offset: Расстояние до запуска анимации (относительно нижней части окна браузера); data-wow-iteration: Повторяем анимацию « столько-то раз».
divclass="wow slideInLeft"data-wow-duration="3.5s"data-wow-delay="1s"data-wow-offset="120"> Определенная информация div> h1class="wow slideInLeft"data-wow-duration="3.5s"data-wow-delay="1s"data-wow-offset="120"> Определенная информация h1>
Также интересно.
Скрытая ниндзя-панель с формой подписки или рекламой | RuMeny
Секретное модальное окно при скроллинге для продажника или лендинга | RuBizScrollToID 2.0
Анимированный CSS3 рекламный баннер для любого сайта — adCard
35 комментариев
Марат, сами проверьте у меня 🙂 Сам скрипт — «пушинка», да и стили для анимации тоже ОЧЕНЬ легкие. + никакого jQuery.
Да, будет! В такой конфигурации загрузки скрипта wow.min.js -пока не загрузится скрипт, вся страница не отрендерится и как минимум пользователю обеспечено моргание элементов, предназначенных для анимирования на экране. А учитывая, что нам советуют ставить сам скрипт в конец документа и туда же его инициализацию, отрисовка страницы в лучшем случае произойдет через 2-3 секунды. Почитайте инфу по теме «неблокирующая загрузка скриптов».
Крутая штука. Все понятно расписано, особенно после видео поняла как классы ставить. Одно но — папочки не качаются. Страничка обновляется и усё.
На самом деле подобная анимация оживит сайт. Хорошо, что имеется много настроек, которые внесут разнообразие. Спасибо за видео — с его помощью легче разобраться что и как надо делать.
Супер Сергей! А подскажите, как реализовать двухстороннюю анимацию к центру слева и справа, как у вас на картинках с коробками курсов выше?
Привет, Марк! Для левого элемента указываем «slideInLeft», а для правого «slideInRight». И все по инструкции.
Я так и делаю, мне нужно вот что, Чтобы это реализовалось в Одну Строчку, а так как я пробую, выходит первый элемент скажем справа, а следующий слева, Но ПОД первым. Меня интересует в ОДНУ строчку, так, чтобы они Состыковались в одну строчку Надеюсь поняли меня)
Можно для первого указать float: left; , а для второго float: right; Если у элементов есть рамки, или просто хотите отступ между элементами, то с 50% уменьшаем до 48.5%, но тогда для второго точно указываем float: right; . Хотя, все можно решить простыми (padding) отступами внутри элемента. Проценты относятся к адаптивному дизайну. Ведь можно и указать точные размеры в пикселях. Главное, чтобы ширина двух элементов в сумме не превышала ширину элемента в котором они находятся. Если все еще второй элемент под первым, то регулируйте проценты. А сразу после этих двух элементов в HTML ставим эту стоку:
"module1">
"element1 wow slideInLeft">.
"element2 wow slideInRight">.
"clear: both;">
Сергей, подскажите пожалуйста, и конечно у себя на сайте тоже создайте пример, будет полезно всем, как заставить данную анимацию повторять циклы. Например в слайдере. В слайдере анимация отлично работает, но только один цикл, и все! Пробовал вставлять animation-direction: infinite; куда только можно, и в классы, и в дивы, и в css, и все без толку. Информация всюду разная и не полная и противоречащая, к тому же данная функция animation везде прописывается по разному! Может я что не так делаю? Буду Вам признателен, если подскажете на том же примере, что Вы делали выше, так как все классы и дивы прописаны в таком же варианте! Заранее благодарен, с уважением!
jQuery плагин нашей разработки. При прокрутке страницы позволяет зафиксировать блок в сайдбаре . Подходит для адаптивных сайтов. При перестраивании контента, когда колонка «прыгает» под основной контент, липкий эффект отключается.
Как подружить плагины WOW.js и jquery.fullPage.js? По отдельности все работает, вместе подключить — пропадает анимация WOW.js. Пробовал решение из зарубежных форумов — не помогло. Может кто-нибудь сталкивался с подобным?
Есть проблема данной анимации на мобильных устройствах. То есть при быстром пролистывании видим просто пустые места. Чтобы анимация активировалась, надо в мобильном устройстве остановиться на таком пустом месте и только после она активируется и начинает выполняться. А так при быстром пролистывании видим просто пустые места в сайте, жуть. Как решение, вижу просто отключать ее на мобильных/медленных устройствах. Но тут не знаю как определять такие устройства (чтобы им просто отключить подключение css и javascript). Надеюсь подскажете решение. Спасибо.
Здравствуйте! По сути, тут нет проблемы, поскольку я замечал такое же у самого Google Plus, когда быстро скролил наверх на iPhone-е. Но это длилось буквально 0.2-0.5 сек. (У него тоже анимация снизу вверх, но сейчас не знаю. кто его вообще использует? :)) Вы еще порегулируйте секунды в параметре задержки (data-wow-delay=»1s») — поставьте 0.2 сек., что значит срабатывать будет чуть ли не сразу. Все еще зависит от скорости и-нета, а также тяжелых картинок на сайте, которые не дают сайту быстрее грузиться. Ведь есть еще скрипты, которые подгружают картинки только тогда, когда скролишь наверх и они оказываются на видимой части окна браузера — это практикуют тяжелые сайты (порталы и т.д. ) Оптимизируйте ВСЕ (JPG и PNG) картинки тут: tinyjpg.com — ускорит загрузку сайта чуть ли не в 2, а то и в 3-4 раза. Да и кто вообще так быстро скролит? P.S. Попробуйте еще поместить скрипт вверх страницы, чтобы вначале скрипт загрузился, а потом все остальное,
Как вообще подружить jquery и этот wow.js. В firefox все нормально, а вот в яндекс браузере при скроле колесиком мыши элементы предполагаемые для анимации не появляются вовсе. Если отключить jquery то тогда все нормально и анимация работает правильно. Но jquery я не могу с сайта убрать, что делать?
Оказалось что проблема связана не с jquery а конкретно с плагином Select2 Bootstrap 3 CSS, отвечающим за стилизацию элемента select.
Подскажите. Можно ли использовать wow.js на продающих landing page? Я видел на офф. сайте что нужна лицензия.
Оппа! Точно, они сделали продукт платным 🙂 $29 за персон.лиц. Хмм. Используйте эту версию, что в архиве, а если докопаются (что мало вероятно), то ссылайтесь на то, что Вы используете еще ту версию, которая была доступна в бесплатном варианте, и не знали, что продукт стал платным 🙂 Исходя из моральных принципов, так делать нельзя, но и неожиданно делать бесплатный продукт платным — это тоже некоторого рода наглость. Хотя, с другой стороны даже неплохой маркетинг, ведь пользователей бесплатной версии данного скрипта очень много.
И еще, для Вашего лендинга рекомендую один из своих проектов: sergeychunkevich.com/usta. rubizscrolltoid/
На деле не все так работает как описано. Все картинки подгружаются сразу а уже потом выводятся со стилями разными . Это бесполезная вещь.
Доброго времени суток. Столкнулся с проблемой что если есть закрепленный анимированый блок он уходит за обычные анимированые блоки И хотелось бы узнать, можно ли это как нибудь исправить
Если я правильно понял, то вы хотите определенный аним.блок выставить на передний план? В таком случае, этому блоку нужно дописать два свойства:
position: relative; /* или absolute */ z-index: 2; /* или число по больше, например 9999 */
