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

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

Градиент в качестве фона
Градиент в качестве фона

Ранее в качестве фона для сайта использовали либо просто заливку цветом, либо какую-то картинку, которая «весила» достаточно много . Затем стали использовать маленький «кусочек» — картинку малого размера, которую множили на весь экран.
Уже сейчас в современных браузерах можно сделать градиентный фон любой сложности при помощи CSS, и при этом совершенно не используя картинки.

Читать полностью
Трансформации для блока анонсов
блок анонсов

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

Читать полностью
Градиент в качестве границы блоков
Граница блока - градиент

Обычно границы задаются цветом, причем каждая из границ может иметь свой цвет. Для того, чтобы границы имели плавные переходы от цвета к цвету из макета сайта вырезались картинки и вставлялись в код страницы.
Попробуем решить задачу современными средствами верстки. В CSS3 есть такое свойство как linear-gradient, с помощью которого можно осуществить нашу задумку.

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

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

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

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