Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Трансформация иконок с iconate.js

Дата добавления: 12.06.2015 - 13:44
Добавил: Buger
Количество просмотров: 696
Количество комментариев: 0
Рейтинг материала: 5.0 / 1
Трансформация иконок с iconate.js
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 5.0
/
голосов 1
iconate.js это небольшая JS библиотека для красивой трансформации иконок из одной формы в другую.



Установка
Скачать и загрузить содержимое архива в файловый менеджер.

Заметка: iconate.js также предоставляет модули для AMD и commonJS.

Использование
1. Подключаем стили и JavaScript файлы.
Код
<link rel="stylesheet" href="iconate.min.css">
<script type="text/javascript" src="iconate.min.js">


2. Создаём элемент-иконку
Код
<i id="icon" class="fa fa-bars fa-lg"></i>


3. Анимируем (в стиле rubberBand) из одного состояния в другое.
Код
var iconElement = document.getElementById('icon');
var options = {
from: 'fa-bars',
to: 'fa-arrow-right',
animation: 'rubberBand'
};
iconate(iconElement, options);


Возможные типы анимации.
rollOutRight
rollOutLeft
rubberBand
zoomOut
zoomIn
fadeOut
fadeOutRight
fadeOutLeft
fadeOutTop
fadeOutBottom
horizontalFlip
verticalFlip
bounceOutBottom
bounceOutTop
bounceOutLeft
bounceOutRight
rotateClockwise
rotateAntiClockwise
tada

Публичный API

iconate(element, [, options] [, callback] )

element - элемент иконки.

options - контейнер с настройками.

from - исходная иконка (к примеру, 'fa-bars')
to - финальная иконка (к примеру, 'fa-arrow-right')
animation - стиль анимации. (к примеру. 'fadeOutRight')(по умолчанию: 'zoomOut')

callback - функция обратного действия, которая запустится после остановки анимации.

Браузерная поддержка


Источник: Не указан
Добавлять комментарии могут только зарегистрированные пользователи.