Textillate – плагин CSS3-анимации текста

Textillate.js - это jQuery-плагин, который объединяет возможности animate.css и lettering.js для легкого применения множества вариантов CSS3-анимации для любого текста.

Пример использования

Начнем с простой разметки:

Код
<h1 class="tlt">Мой текст</h1>


Для вызова плагина для этого текста ваш javascript-код должен выглядеть следующим образом:

Код
$(function () {
  $('.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();


Обратите внимание, что вы можете контролировать параметры анимации для каждого пункта (<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,
  }
});

  • O-striker

  • 3541

  • 1

  • 198
Теги: jQuery, Textillate, css3

Ссылки на статью:

Похожие статьи: