Эффекты анимации текста на jQuery

Анимированная типография на сайтах встречается все чаще и чаще, особенно на одностаничных ресурсах. Заголовки основных разделов стараются сделать более динамичными для усиления внимания или просто красивого оформления. Это не ограничивается hover-эффектами и использованием одной только каскадной таблицей, в частности, анимацией CSS свойством animation. Применяется также библиотека jQuery, JavaScript, готовые плагины, что позволяет добиться очень красивой анимации текста.

Сегодняшняя подборка состоит из нескольких jQuery-плагинов, которые легко подключаются к любому сайту. Для WordPress’a есть специальные модули, добавляющие анимацию как элементом сайта, так и анимацию к тексту.

JQuery-плагин textillate.js

Пожалуй, самый известный в сети интернет плагин анимации текста с креативными эффектами. Построен с использование Animate.css, Lettering.js и с добавлением библиотеки JQuery в итоге получается оживить каждую букву в слове.

Подключение textillate.js к сайту

Шаг 1-й. Скачиваем скрипт из официального сайта разработчика.

Шаг 2-й. В области хедера, между тегами <head>…</head>, подключаем все файлы скрипта. (Библиотеку JQuery подключайте в том случае, если ранее вы этого не делали). Также проследите, чтобы был указан правильный путь к файлам.

<link href="textillate/animate.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="textillate/jquery.lettering.js"></script>
<script src="textillate/jquery.textillate.js"></script>

Шаг 3-й. В зависимости от выбора эффекта, дополнительных опций, подключается скрипт запуска анимации. В котором содержится определенный класс, указывающий в каком блоке анимировать текст.

Пример.

HTML

<h1 class="textillate-demo">Цитаты великих людей</h1>

Script запуска

<script>
$(function () {
    $(' .textillate-demo ').textillate({
        in: {
            effect: 'bounceInLeft'
        }
    });
})
</script>

Основные опции и настройка плагина textillate.js

$('.tlt').textillate({
  // селектор по умолчанию для использования нескольких текстов для анимации
  selector: '.texts',

  // Повтор анимации true/false
  loop: false,

  // устанавливает минимальное время отображения текста, дальше идет исчезновение текста с указанным эффектом
  minDisplayTime: 2000,

  // устанавливает начальную задержку перед началом анимации
  // (обратите внимание, что в зависимости от эффекта вам, возможно, придется применять вручную
  // visibility: скрытый элемент перед запуском этого плагина)
  initialDelay: 0,

  // автоматический запуск анимации true/false
  autoStart: true,

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

  // эффект анимации в исчезновении текста
  outEffects: [ 'hinge' ],

  // Выбор эффекта в появлении текста
  in: {
    // название эффекта
    effect: 'fadeInLeftBig',

    // время появления каждой буквы
    delayScale: 1.5,

    // установить задержку между символами
    delay: 50,

    // одновременное появление эффекта true/false
    sync: false,

    // рандомная последовательность символов
    // (заметим, что рандом не имеет смысла с sync = true)
    shuffle: false,

    // обратная последовательность символов
    // (заметим, что обратное не имеет смысла с sync = true)
    reverse: false,

    // callback that executes once the animation has finished
    callback: function () {}
  },

  // настройка исчезновении анимации
  out: {
    effect: 'hinge',
    delayScale: 1.5,
    delay: 50,
    sync: false,
    shuffle: false,
    reverse: false,
    callback: function () {}
  },

  // callback that executes once textillate has finished
  callback: function () {},
  // задать Тип маркера для анимации (доступные типы: символ 'char' и слово 'word')
  type: 'char'
});

Библиотека включает в себя набор готовых классов (API), с помощью которых можно реализовать последующий показ текста. Эффекты, входа и выхода анимации, могут быть заданы абсолютно разные для каждого текста в отдельности.

Пример.

HTML

<h1 class="tlt">
    <ul class="texts">
        <li data-out-effect="fadeOutUpBig" data-out-shuffle="true">Первый текст</li>
        <li data-in-effect="bounceInLeft">Второй текст</li>
        <li data-in-effect="fadeIn">Третий текст</li>
    </ul>
    </ul>
</h1>

Script запуска

<script>
$(function () {
  $('.tlt').textillate({
    loop: true,
  });
})
</script>

data-out-effect – эффект выхода (out).
data-in-effect – эффект входа (in).

По желанию, возможно, детально настроить анимацию не только текста, но и буквы. То есть задать время появления, исчезновения и остальных, так сказать, опций.

Пример.

HTML

<h1 class="textillate-demo">JQuery-плагин textillate.js</h1>

Script запуска

<script>
$(function () {
  $('.textillate-demo').textillate({
    loop: true,
    minDisplayTime: 1000,
    initialDelay: 0,
    autoStart: true,
    inEffects: [],
    outEffects: [ 'fadeOutUpBig' ],
    in: {
      effect: 'fadeInUpBig',
      delayScale: 1.5,
      delay: 50,
      sync: false,
      shuffle: false
    },
    out: {
      effect: 'fadeOutUpBig',
      delayScale: 1.5,
      delay: 50,
      sync: false,
      shuffle: false,
    }
  });
})
</script>

Мой демо-показ я собрал на одной страницы. Больше примеров находится на официальном сайте.

Посмотреть демо