Сайт ищет нового владельца по разумной цене :) По всем вопросам: promonik1@ya.ru, skype: nik-luck007, https://vk.com/promonik
2
Вы не авторизованы!
Присоединяйтесь к нашему сообществу :)
авторизация
Вакансии
На сайт требуется контент-менеджер
смотреть вакансии
Анимация с помощью animo.js

Анимация с помощью animo.js

Скрипты для uCoz 2013-Сен-14 OkJkeee 2.4k 212 0
Сегодня рассмотрим как работать с jQuery плагином animo.js для анимации веб контента.

Прежде всего, нужно отметить, что данный плагин использует более 60 видов анимации, список которых доступен на сайте animate.css.

Так же стоит сказать что данный плагин работает на jQuery 2. Для использования, вам необходимо подключить и 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");


Примеры использования данного плагина, можете найти в демо.
Источник: не указан
0 комментариев
avatar