Textillate – плагин CSS3-анимации текста
Textillate.js - это jQuery-плагин, который объединяет возможности animate.css и lettering.js для легкого применения множества вариантов CSS3-анимации для любого текста.
Пример использования
Начнем с простой разметки:
Для вызова плагина для этого текста ваш javascript-код должен выглядеть следующим образом:
В данном случае будет использоваться анимация с параметрами по умолчанию. Чтобы изменить настройки по умолчанию, вы можете использовать HTML data API:
или передать в параметрах при инициализации (см. полный список настроек ниже):
Вы можете также вызвать textillate.js для анимации списка текстов при помощи следующей разметки:
Обратите внимание, что вы можете контролировать параметры анимации для каждого пункта (<li>), при помощи data api.
Требования.
Чтобы начать использование textillate.js, вам нужно подключить следующие библиотеки:
jQuery
lettering.js
animate.css
Настройки
Пример использования
Начнем с простой разметки:
Код
<h1 class="tlt">Мой текст</h1>
Для вызова плагина для этого текста ваш javascript-код должен выглядеть следующим образом:
Код
$(function () {
$('.tlt').textillate();
})
$('.tlt').textillate();
})
В данном случае будет использоваться анимация с параметрами по умолчанию. Чтобы изменить настройки по умолчанию, вы можете использовать HTML data API:
Код
<h1 class="tlt" data-in-effect="rollIn">Заголовок</h1>
или передать в параметрах при инициализации (см. полный список настроек ниже):
Код
$('.tlt').textillate({ in: { effect: 'rollIn' } });
Вы можете также вызвать textillate.js для анимации списка текстов при помощи следующей разметки:
Код
<h1 class="tlt">
<ul class="texts">
<li data-out-effect="fadeOut" data-out-shuffle="true">Пункт меню</li>
<li data-in-effect="fadeIn">Второй пункт меню</li>
</ul>
</h1>
$('.tlt').textillate();
<ul class="texts">
<li data-out-effect="fadeOut" data-out-shuffle="true">Пункт меню</li>
<li data-in-effect="fadeIn">Второй пункт меню</li>
</ul>
</h1>
$('.tlt').textillate();
Обратите внимание, что вы можете контролировать параметры анимации для каждого пункта (<li>), при помощи data api.
Требования.
Чтобы начать использование textillate.js, вам нужно подключить следующие библиотеки:
jQuery
lettering.js
animate.css
Настройки
Код
$('.tlt').textillate({
// Выбор по умолчанию для использования при обнаружении нескольких текстов для анимации
selector: '.texts',
// включить цикл
loop: false,
// устанавливает минимальное время отображения для каждого текста до его заменить
minDisplayTime: 2000,
// устанавливает начальную задержку перед запуском анимации
initialDelay: 0,
// указать, следует ли автоматически запускать анимацию
autoStart: true,
// характер показан / скрыт до или после анимации
inEffects: [],
// настраиваемый набор "из" эффектов
outEffects: [ 'hinge' ],
// В настройки анимации
in: {
// установить название эффекта
effect: 'fadeInLeftBig',
// установить задержку коэффициент, применяемый к каждому последовательный характер
delayScale: 1.5,
// установить задержку между символами
delay: 50,
// установлен в истинное оживить всех символов в то же время
sync: false,
// случайная последовательность символов
// (Отметим, что перемешивание не имеет смысла в синхронизации = True)
shuffle: false
},
// из параметров анимации
out: {
effect: 'hinge',
delayScale: 1.5,
delay: 50,
sync: false,
shuffle: false,
}
});
// Выбор по умолчанию для использования при обнаружении нескольких текстов для анимации
selector: '.texts',
// включить цикл
loop: false,
// устанавливает минимальное время отображения для каждого текста до его заменить
minDisplayTime: 2000,
// устанавливает начальную задержку перед запуском анимации
initialDelay: 0,
// указать, следует ли автоматически запускать анимацию
autoStart: true,
// характер показан / скрыт до или после анимации
inEffects: [],
// настраиваемый набор "из" эффектов
outEffects: [ 'hinge' ],
// В настройки анимации
in: {
// установить название эффекта
effect: 'fadeInLeftBig',
// установить задержку коэффициент, применяемый к каждому последовательный характер
delayScale: 1.5,
// установить задержку между символами
delay: 50,
// установлен в истинное оживить всех символов в то же время
sync: false,
// случайная последовательность символов
// (Отметим, что перемешивание не имеет смысла в синхронизации = True)
shuffle: false
},
// из параметров анимации
out: {
effect: 'hinge',
delayScale: 1.5,
delay: 50,
sync: false,
shuffle: false,
}
});
-
O-striker -
3541 -
1 -
198
Но только нужно ставить наверное на те модули которые обновляться должны не раньше через пару тройку минут
С Уважением, Андрей...