Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Трансформация иконок с iconate.js
Дата добавления: 12.06.2015 - 13:44
Категория: Уроки / Литература / Пособия
Добавил: Buger
Количество просмотров: 1476
Количество комментариев: 0
Рейтинг материала: 5.0 / 1
БЕСПЛАТНО
рейтинг
5.0
/
голосов
1
iconate.js это небольшая JS библиотека для красивой трансформации иконок из одной формы в другую.
Установка
Скачать и загрузить содержимое архива в файловый менеджер.
Заметка: iconate.js также предоставляет модули для AMD и commonJS.
Использование
1. Подключаем стили и JavaScript файлы.
2. Создаём элемент-иконку
3. Анимируем (в стиле rubberBand) из одного состояния в другое.
Возможные типы анимации.
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 - функция обратного действия, которая запустится после остановки анимации.
Браузерная поддержка
Установка
Скачать и загрузить содержимое архива в файловый менеджер.
Заметка: iconate.js также предоставляет модули для AMD и commonJS.
Использование
1. Подключаем стили и JavaScript файлы.
Код
<link rel="stylesheet" href="iconate.min.css">
<script type="text/javascript" src="iconate.min.js">
<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);
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 - функция обратного действия, которая запустится после остановки анимации.
Браузерная поддержка
Поделись с друзьями:
