Обратная связь

Анимация на сайте с помощью Animate.css

Просмотров: 533

На чтение:

Анимация на сайте с помощью Animate.css

Потрясающий скрипт для организации анимации блоков на сайте. Для установки на сайт необходимо установить стили animate.css

Скачать Animate.css

Нажмите правой кнопкой мышки на кнопку и выберите "Сохранить ссылку как"

Далее перекиньте его в папку с вашим сайтом через FTP и в шапке сайта пропишите:

 

<link rel="stylesheet" href="/путь до файла/animate.min.css" />


Примеры - выбор анимации

ANIMATE.CSS

Выберите нужный эффект:


Как использовать

Чтобы анимировать элемент, нужно добавить к нему класс animated и эффект из таблицы ниже:

Название класса
bounce flash pulse rubberBand
shake headShake swing tada
wobble jello bounceIn bounceInDown
bounceInLeft bounceInRight bounceInUp bounceOut
bounceOutDown bounceOutLeft bounceOutRight bounceOutUp
fadeIn fadeInDown fadeInDownBig fadeInLeft
fadeInLeftBig fadeInRight fadeInRightBig fadeInUp
fadeInUpBig fadeOut fadeOutDown fadeOutDownBig
fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig
fadeOutUp fadeOutUpBig flipInX flipInY
flipOutX flipOutY lightSpeedIn lightSpeedOut
rotateIn rotateInDownLeft rotateInDownRight rotateInUpLeft
rotateInUpRight rotateOut rotateOutDownLeft rotateOutDownRight
rotateOutUpLeft rotateOutUpRight hinge jackInTheBox
rollIn rollOut zoomIn zoomInDown
zoomInLeft zoomInRight zoomInUp zoomOut
zoomOutDown zoomOutLeft zoomOutRight zoomOutUp
slideInDown slideInLeft slideInRight slideInUp
slideOutDown slideOutLeft slideOutRight slideOutUp
heartBeat

Можно также добавить класс infinite для бесконечного цикла, задержку и продолжительность эффекта:

Задержка:

Название класса Время задержки
delay-2s 2 сек
delay-3s 3 сек
delay-4s 4 сек
delay-5s 5 сек

Продолжительность:

Название класса Скорость
slow 2 сек
slower 3 сек
fast 800ms
faster 500ms

Пример кода

 

<div class="animated infinite bounce delay-5s slower">Пример</div>

Пример

Если вы хотите реализовать у себя на сайте анимацию блоков при скроле, то кликайте на эту ссылку:

Анимация блоков при прокрутке

Опубликовано: 29.09.2022

Рейтинг: 5/5 - 1 голосов

Комментарии ()

    Другие статьи

    Почему Modx revo? Преимущества системы перед другими CMS

    В этой статье я попытаюсь объяснить почему в свое время я бросил удобный и несложный Wordpress и "пересел"…

    Рейтинг: 4.3/5 - 4 голосов

    Как клонировать вордпресс при режиме мультисайта?

    Добрый день мои маленькие любители сайтостроительства. На связи Арсен Амбарцумян и сегодня я расскажу…

    Рейтинг: 5/5 - 3 голосов

    Как редактировать страницы в Modx Revo из фронтенда (Не заходя в админку)

    Добрый день Господа разработчики. На связи Арсен Амбарцумян, ваш учитель по старту разработки на системе…

    Рейтинг: 4.7/5 - 3 голосов

    Collaborator.pro ввел санкции против россиян? Мое мнение.

    Недавно на почту пришло письмо от Collaborator.pro. Мол, дескать, пользователям из России мы закрываем…

    Рейтинг: 4.7/5 - 3 голосов

    Катерина (06 февраля 2024, 14:53):
    там рядом еще горнолыжный комплекс

    Вероника (16 июля 2022, 22:12):
    Москва самый волшебный город. И ночи тут особенные

    MeandI (16 июля 2022, 17:33):
    Тоже с недавних пор перешел на модекс. Скажу откровенно временами трудно, и сам по себе сайт тут строится иначе, чем на любой другой cms. Но система гибкая…

    Кристина (06 июня 2022, 11:16):
    Безумно красиво! Отдает зимним волшебством!

    Гриша (05 апреля 2022, 21:28):
    Спасибо, помог!

    © 2022 Arsenit.ru - Блог бывшего сео специалиста | Д.Р. блога 23.03.2022