Эффекты красивого появления html блоков на jQuery

📌Заработай монеты
🔥 Обмен на крипту
✔️Тренд 2024 года!

Играть через Telegram

Платит 40-200$ за вход в игру. Без вложений. Помнишь DOGS, который всем заплатил - это второй шанс! 12 млн игроков за 3 дня!

PAWS >> Играть!

Side Fans - корейская Telegram игра, 10 млн. Листинг $$$ ожидается щедрым

Заработать

Повышай рейтинг, выживи до окончания таймера. Листинг будет

Перейти в telegram

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

Особенно эффектно данные "спецэффекты" смотрятся, когда пользователь прокручивает страницу и видит подгрузку новых html элементов. На сегодня самой лучшей библиотекой по созданию анимации блоков я считаю wow.js. Этот плагин не требует jQuery библиотеки! А значит будет работать на любом сайте.

Как вы видите из примера эффектов просто великое множество. Рассмотрим как установить скрипт:

1. Подключить wowanimate.css и wow.min.js
2. Добавить после wow.min.js внутри head запись <script>new WOW().init();</script>, которая запустит активацию эффектов
3. Теперь, чтобы назначить эффект на нужный тег пишите к нему класс: class="wow fadeInDown"

Поскольку скрипт может загружать блоки с разным типом анимации, ее мы сразу указываем в классе. Например, тег с классом class="wow fadeInUp" будет означать, что на этом блоке будет плавное появление блока снизу-вверх.

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

Рассмотрим пример. Запись типа:

<div class="wow tada" data-wow-duration="0.8s" data-wow-delay="0.6s"></div>

Означает, что будет применен эффект пульсации длительностью 0.8 сек. с задержкой перед запуском в 0.6 сек. В моем примере вы найдете десятки настроенных эффектов, но вы можете использовать все. Для этого загляните в файл wowanimate.css. В нем все эффект начинаются с @-webkit-keyframes. Например, @-webkit-keyframes rotateIn, означает, что эффект rotateIn, который можно использовать для анимации.