Ваша корзина пуста

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

Вы здесь: Главная страница » Файлы » Уроки / Литература / Пособия

Уважаемые пользователи!

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

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

Дата добавления: 12.06.2015 - 13:44

Категория: Уроки / Литература / Пособия

Добавил: Buger

Количество просмотров: 2.0k

Количество комментариев: 0

Рейтинг материала: 5.0 / 1

БЕСПЛАТНО

Скачать файл с сервера

рейтинг 5.0

голосов 1

iconate.js это небольшая JS библиотека для красивой трансформации иконок из одной формы в другую.

Демонстрация

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

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

Использование
1. Подключаем стили и JavaScript файлы.

Код

2. Создаём элемент-иконку

Код

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 - функция обратного действия, которая запустится после остановки анимации.

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