Уважаемые друзья и пользователи сайта ART-UCOZ!
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уведомляем вас о том, что мы приняли трудное, но обдуманное решение о закрытии проекта в качестве Интернет-магазина ART-UCOZ. С 05.11.2022 года сайт ART-UCOZ.RU продолжит работать в качестве каталога файлов, статей и информации. Будет закрыт только раздел интернет-магазина!
Все товары были перенесены в наш новый проект SHOPTHEMES - Vendor Marketplace (https://shopthemes.ru), над которым мы долго работали и продолжаем улучшать его в настоящее время.
Вас ждут: личный кабинет, возможность пополнения баланса на любую сумму, зачисление бонусов за посещение, перевод средств между пользователями, вывод средств (для продавцов), личный чат, больше новых цифровых товаров и многое другое.
Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!
Подобные просьбы и вопросы - будут игнорироваться!
Трансформация иконок с iconate.js
Дата добавления: 12.06.2015 - 13:44
Категория: Уроки / Литература / Пособия
Добавил: Buger
Количество просмотров: 2.3k
Количество комментариев: 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 - функция обратного действия, которая запустится после остановки анимации.
Браузерная поддержка
Добавлять комментарии могут только зарегистрированные пользователи.
Поделись с друзьями: