Трансформация иконок с iconate.js
iconate.js это небольшая JS библиотека для красивой трансформации иконок из одной формы в другую.
Установка
- NPM: npm install iconate
- Bower: bower install iconate
- Архив zip
Заметка: 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 - функция обратного действия, которая запустится после остановки анимации.
Браузерная поддержка
Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://github.com/bitshadow/iconate
Перевел: Станислав Протасевич
Урок создан: 11 Июня 2015
Просмотров: 8420
Правила перепечатки
5 последних уроков рубрики "jQuery"
-
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
-
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
-
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
-
Рисуем диаграмму Ганта
jQuery плагин для создания диаграммы Ганта.
-
AJAX и PHP: загрузка файла
Пример того как осуществить загрузку файла через PHP и jQuery ajax.