Использование Animate.css
После прочтения этой статьи у многих посетителей возник вопрос, как же на практике применять библиотеку Animate.css. В действительности всё происходит достаточно просто, надо лишь один раз пройти все этапы, а потом по аналогии повторять некоторые действия.
1. Для начала следует скачать и подключить библиотеку. Есть три варианта.
- Полная версия. Содержит более трёх тысяч строк кода объёмом около 60 кБ. Она хорошо подходит на первом этапе ознакомления с анимацией в целом, поскольку позволяет взглянуть, как это всё устроено.
- Упакованная версия (обфусцированная, говоря профессиональным языком). В css-файле нет табуляции, пробелов и переносов строк. Объём файла за счёт этого сокращается раза в полтора, но читать код при этом становится затруднительно.
- Выборочные эффекты. Лучше всего подходит для большинства задач, поскольку позволяет указать только понравившиеся эффекты, избавившись от лишнего.
Далее подключаем файл animate.css через тег как это делается с любым другим стилевым файлом.
2. Чтобы применить эффект анимации к желаемому элементу, добавляем к нему два класса — animated и класс с названием эффекта, допустим fadeInDown (список всех эффектов и их названия смотрим здесь). Например, вы желаете добавить мерцание ко всем изображениям на странице. В HTML записываем следующее:
Если на сайте используется jQuery, то добавление классов упрощается и делается через JavaScript.
3. Сама анимация включается автоматически при загрузке страницы. Это удобно для всплывающих сообщений, призванных привлечь внимание пользователя (пример 1).
Пример 1. Всплывающее сообщение
.warning Зенитное часовое число оценивает экваториальный секстант! Чтобы эффект срабатывал при наведении на элемент курсора мыши, придётся использовать JavaScript. В качестве примера рассмотрим картинки, которые двигаются при наведении на них курсора мыши. К тегу добавляем класс animated и подключаем jQuery (пример 2).
В данном примере при наведении курсора на изображение с классом animated добавляется ещё один класс bounce ; если курсор убрать, то класс bounce также убирается.
4. Окончательно можно настроить анимацию по своему вкусу, изменив скорость анимации, а также задав время задержки через CSS. И то и другое не обязательно и применяется при необходимости.
Набор анимаций animate.css
Для использования animate.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 для бесконечного цикла, задержку и продолжительность эффекта:
Задержка:
Продолжительность:
Пример:
Пример
Также можно самостоятельно изменить продолжительность анимации, задержку и количество воспроизведений, добавив к элементу стили:
.yourElement animation-duration: 3s;
animation-delay: 2s;
animation-iteration-count: infinite;
>
Для того, чтобы использовать такие эффекты при прокрутке страницы, можно использовать скрипт WOW.js
Создание анимации с помощью Animate.css
Анимация может как улучшить пользовательский интерфейс вашего приложения, так и испортить его. В CSS анимацию можно создавать вручную с помощью стандартного CSS3, но это решение требует серьезного обслуживания и тщательной настройки. Альтернативное средство для создания анимации – Animate.css, библиотека готовых к использованию кросс-браузерной анимации, которая работает по принципу «просто добавь воды». Это быстрое и эффективное решение, которое стоит попробовать.
В этом мануале мы создадим небольшое приложение со списком задач на Javascript, а затем попробуем анимировать различные его элементы. Чтобы продемонстрировать, как Animate.css может улучшить ваш рабочий процесс, мы сначала анимируем один элемент с помощью стандартного CSS3, а затем сделаем то же самое через Animate.css. После этого мы добавим несколько других вариантов анимации из обширной библиотеки Animate.css.
Требования
- Любой редактор кода, например nano или Visual Studio Code.
- Веб-браузер
- Знакомство с основами HTML. Чтобы освежить свои знания, просмотрите серию учебных руководств «Как создать веб-сайт с помощью HTML».
1: Создание тестового приложения
Прежде чем мы рассмотрим, как использовать библиотеку Animate.css, давайте создадим небольшое тестовое приложение для ведения списка дел. Затем мы напишем анимацию fadeIn, используя стандартный CSS3.
Сначала создайте новую папку для тестового проекта:
Здесь мы создадим три файла: index.html, app.js и style.css.
Используйте nano или любой другой редактор кода, чтобы создать первый файл по имени index.html:
Добавьте следующие строки, которые создают краткий HTML-документ со ссылками на файлы CSS и Javascript:
В этом файле мы определили заголовок CSS Animations, а также связали файл с таблицей стилей CSS (которую мы сделаем чуть позже). Затем мы определяем некоторые объекты Javascript внутри тега и ссылаемся на третий файл, app.js.
Сохраните и закройте файл.
Теперь создайте файл style.css в своем редакторе:
Добавьте следующий контент, который определит анимацию fadeIn:
.fadeIn < animation: fadeIn 1s; >@keyframes fadeIn < from < opacity: 0; >to < opacity: 1; >>
Мы определили продолжительность анимации и использовали правило @keyframes для настройки цикла анимации.
Сохраните и закройте файл.
Теперь создадим наш последний файл по имени app.js:
Добавьте в файл следующий контент. Эти строки определяют функцию addTodo и встраивают анимацию:
const addTodo = () => < const ul = document.getElementsByTagName('ul')[0]; const input = document.getElementById('todoInput').value; if (input.length >0) < const li = document.createElement('li'); li.classList.add('fadeIn'); li.appendChild(document.createTextNode(input)); ul.appendChild(li); document.getElementById('todoInput').value = ''; > >;
Итак, в приложении Todo есть текстовое поле и кнопка. Когда мы вводим текст в поле и нажимаем эту кнопку, приложение создает новый элемент и добавляет к нему наш текст. Обратите внимание на выделенную строку. Она присваивает класс fadeIn каждому новому элементу.
Сохраните и закройте файл.
Теперь откройте браузер и загрузите index.html. На экране появится поле и кнопка. Напишите текст в поле и нажмите Add Todo. Ваша новая задача исчезнет из строки и появится в списке.
Если у вас получилось именно это – поздравляем, вы успешно применили анимацию к элементу, используя стандартный CSS3. Теперь давайте перепишем наш код для поддержки Animate.css и посмотрим, как это может улучшить его производительность и читабельность. После этого мы изучим еще несколько вариантов анимации, которые можно найти в этой библиотеке.
2: Использование библиотеки Animate.css
На этом этапе мы перепишем наш код с помощью Animate.css, а затем рассмотрим некоторые дополнительные варианты анимации.
Во-первых, нужно установить библиотеку Animate.css. Мы можем сделать это с помощью CDN или сети доставки контента.
Снова откройте файл index.html в своем редакторе:
Внутри тега удалите существующий тег для style.css и замените его выделенным кодом:
Теперь в теге используется официальная ссылка Animate.css, что позволяет нам добавить данную библиотеку прямо на страницу нашего приложения.
Примечание: Вы также можете установить библиотеку с помощью менеджера пакетов npm или yarn.
Чтобы установить библиотеку с помощью npm, используйте эту команду:
Если вы хотите установить библиотеку с помощью yarn, введите такую команду:
Сохраните и закройте index.html.
Теперь давайте перепишем и Javascript, чтобы применить анимацию fadeIn с помощью Animate.css.
Каждый класс в библиотеке Animate.css использует префикс animate__. Сначала мы должны добавить animate__animated. Так элементы узнают, что они должны использовать библиотеку Animate.css. Затем мы добавим animate__specific_animation. Другие доступные опции вы можете просмотреть на официальном сайте библиотеки.
Итак, в нашем примере мы добавим animate__animated, а затем animate__fadeIn в classList, чтобы каждый новый элемент списка появлялся постепенно.
Внесите в свой код следующие выделенные изменения. Окончательный вариант кода имеет такой вид:
const addTodo = () => < const ul = document.getElementsByTagName('ul')[0]; const input = document.getElementById('todoInput').value; if (input.length >0) < const li = document.createElement('li'); const animations = [ 'animate__animated', 'animate__fadeIn' ]; li.classList.add(. animations); li.appendChild(document.createTextNode(input)); ul.appendChild(li); document.getElementById('todoInput').value = ''; > >;
Мы создали константу, которая включает классы Animate.css, а затем заменили fadeIn этой константой.
Сохраните и закройте файл.
Теперь перезагрузите браузер. Стиль fadeIn по-прежнему будет отображаться, только теперь эффект написан с помощью библиотеки Animate.css.
Написанная с помощью Animate.css анимация быстро работает и делает код более удобным. Чтобы продемонстрировать это, давайте добавим еще несколько анимированных элементов в тег . Откройте index.html в своем редакторе:
Предположим, мы хотим, чтобы каждый элемент внутри DOM увеличивался, когда пользователь загружает страницу, и чтобы эта анимация повторялась три раза. Все, что нам нужно сделать, это добавить в наш код классы animated__animate, animated__zoomIn и animated__repeat.
Добавьте эти три класса в тег :
Сохраните и закройте файл.
Теперь перезагрузите файл index.html в браузере и посмотрите на вашу новую анимацию.
Итак, мы успешно внедрили анимацию CSS в HTML и Javascript с помощью библиотеки Animate.css, и при этом нам не пришлось писать код анимации вручную.
Заключение
Animate.css — это быстрое и эффективное решение для добавления CSS-анимации. Эта библиотека ускорит ваш рабочий процесс и поможет создать более читаемый код. Дополнительную информацию о библиотеке Animate.css можно найти на ее официальном сайте.
Помните: анимация может быстро перегрузить ваш сайт и ухудшить пользовательский опыт. Сайт Animate.css содержит полезные разделы с рекомендациями и разбором ошибок Best Practices и Gotchas). Кроме того, анимация также может оказаться вредной для людей с определенными проблемами со здоровьем. Animate.css поддерживает мультимедийный запрос prefers-reduced-motion, поэтому клиенты могут отключать потенциально опасные виды анимации.