logo

Библиотека Animate.css

CSS3 поддерживает покадровую анимацию, которая позволяет создавать сложные анимации объекта. Существует возможность задавать множество параметров работы анимации при помощи свойства animation и правила @keyframen.

Но лучше воспользоваться готовыми решениями, которые позволяют анимировать любой объект. Для этого воспользуемся библиотекой Animate it.

Заходим на официальный сайт, выбираем в левой колонке вариант анимации и видим какой эффект вызывает данная анимация. Нажимаем на кнопку Animate it для того, чтобы повторно просмотреть.

Возможны 2 способа подключение данной библиотеки к своему сайту:

1. Скачиваем библиотеку, кликнув на Download Animate.css. Подключаем ее к своей странице на сайте


<head>
  <link rel="stylesheet" href="animate.css">
</head>

Не забываем указывать реальный путь к файлу

2. Подключаем внешний файл с библиотекой


<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

Пользоваться этой библиотекой очень просто:
Допустим вы хотите какой либо элемент заставить двигаться. Присваиваете этому элементу дополнительный класс с именем выбранной анимации.

Рассмотрим на примере:

Создадим блок с рисунком логотипа сайта


<div class="logo">
    <img src="images/logo.png" alt="Логотип">
</div>

Теперь, для того, чтобы добавить анимацию к блоку, нужно просто дописать класс animated и класс с названием анимации, в данном примере это — bounceInLeft.


<div class="logo animated bounceInLeft">
    <img src="images/logo.png" alt="Логотип">
</div>

Если еще добавить выбранному элементу класс infinite, то анимация будет повторятся бесконечно, что и сделано на примере ниже.

Логотип

Вот таким образом добавляем анимацию к любому выбранному вами элементу.

При желании вы сами можете откорректировать ту или иную анимацию, внося изменения в файле «аnimate.css»

Все анимации размещены в скаченном файле. Но вы вряд ли будете использовать все анимации, в лучшем случае 2-3, поэтому есть смысл убрать из файла лишние, а может быть наоборот — выбрать необходимые анимации и вставить их в свой файл стилей

Тем самым увеличите свободное место на сайте

Вот так просто можно делать красивые анимации на любой странице сайта, используя уже готовую библиотеку Animate.css.


Практические примеры 0

Рекомендую прочитать...

Lightbox на чистом CSS3 без JavaScript
Lightbox на чистом CSS3 без использования JavaScript

Распространение разметки CSS3 и поддержка ее современными браузерами, позволило создавать эффект всплывающего поверх контента изображения на чистом CSS3.

Читать полностью
Как изменить цвет изображения
как изменить цвет изображения

Как! Во многих интернет магазинах присутствует такая штука: цвет товара меняет свой цвет. Т.е. при клике на один из представленных цветов товар, как правило, это одежда, автомашина, чехлы для телефона или сам телефон меняет свою цветовую окраску. Со стороны кажется, что товар как бы заливается выбранным цветом, или приобретает тот орнамент ( часто представлены при […]

Читать полностью
Ссылки, события при наведении и клике

Стандартный вид ссылки это текст темно-фиолетового цвета, подчеркнутый снизу. При клике цвет изменяется на красный и подчеркивание остается. Первоначально верстальщики обходились малым: меняли цвет первоначального текста, убирали подчеркивание при наведении и клике, изменяя при этом и цвет ссылки.

Читать полностью

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.