Сегодня рассмотрим как работать с jQuery плагином animo.js для анимации веб контента.
Прежде всего, нужно отметить, что данный плагин использует более 60 видов анимации, список которых доступен на сайте
animate.css.
Так же стоит сказать что данный
плагин работает на jQuery. Для использования, вам необходимо подключить и js и css файл.
<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="animo.js" type="text/javascript"></script>
<link href="animate+animo.css" rel="stylesheet" type="text/css">
Настройки
Анимация
$(element).animo({
// [string]/[array] имена классов элементов,
animation: "name", // ["name1", "name2", "name3"]
// [float] время (в секундах) на одну итерацию
duration: 0.8,
// [int] количество итераций
iterate: 1,
// [string] тип анимации
timing: "linear",
// [boolean] убрать элемент со страницы после завершения анимации
keep: false
} [,function]);
Размытие
$(element).animo("blur", {
// [int] радиус размытия
amount: 3,
// [float] время (в секундах)
duration: 0.6,
// [float] время (в секундах) для автоматического фокуса
focusAfter: 3.5,
} [,function]);
// использование по умолчанию
$(element).animo("blur" [,function]);
Поворот
$(element).animo("rotate", {
// [int] количество градусов
degrees: 15,
// [float] время (в секундах)
duration: 0.6
} [,function]);
// использование по умолчанию
$(element).animo("rotate" [,function]);
Фокус
// Убирает эффект размытия
$(element).animo("focus");
Очистка
// Удаляем все эффекты от animo
$(element).animo("cleanse");