Потрясающий скрипт для организации анимации блоков на сайте. Для установки на сайт необходимо установить стили 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>
Пример
Если вы хотите реализовать у себя на сайте анимацию блоков при скроле, то кликайте на эту ссылку:
Анимация блоков при прокрутке
Комментарии ()