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

demo

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
Просмотров: 8507
Правила перепечатки

5 последних уроков рубрики "jQuery"

^ Наверх ^