Textillate.js – jQuery-плагин для применения 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({
    // the default selector to use when detecting multiple texts to animate
    selector: '.texts',

    // enable looping
    loop: false,

    // sets the minimum display time for each text before it is replaced
    minDisplayTime: 2000,

    // sets the initial delay before starting the animation
    initialDelay: 0,

    // set whether or not to automatically start animating
    autoStart: true,

    // custom set of 'in' effects. This effects whether or not the
    // character is shown/hidden before or after an animation
    inEffects: [],

    // custom set of 'out' effects
    outEffects: [ 'hinge' ],

    // in animation settings
    in: {
        // set the effect name
        effect: 'fadeInLeftBig',

        // set the delay factor applied to each consecutive character
        delayScale: 1.5,

        // set the delay between each character
        delay: 50,

        // set to true to animate all the characters at the same time
        sync: false,

        // randomize the character sequence
        // (note that shuffle doesn't make sence in sync = true)
        shuffle: false
    },

    // out animation settings
    out: {
        effect: 'hinge',
        delayScale: 1.5,
        delay: 50,
        sync: false,
        shuffle: false,
    }
});