Плагин Textualizer

23.01.13 25.01.15 Нет 4109

Плагин Textualizer позволяет осуществлять интересные переходы при смене текста. При переходе с одного текста на другой, любой символ текущего текста, являющийся общим для следующего, остается на экране и переходит на новое место с разными эффектами.

Применение:

var list = ['first blurb', 'second blurb', 'third blurb'];  // список фрагментов


var txt = $('#txtlzr');  // Контейнер, в котором обрабатывается список


var options = {
  duration: 1000,          // Время (ms) показа каждого фрагмента на экране
  rearrangeDuration: 1000, // Время (ms) занятия символом своей позиции
  effect: 'random',        // Анимационные эффекты появления символов
  centered: true           // Центрирование текста в соответсвии с контейнером
}


txt.textualizer(list, options); // текстуализировать это!
txt.textualizer('start'); // старт

Анимационные эффекты:

Текстуализатор поддерживает эффекты: fadeIn, slideLeft, slideTop, и random. Вы можете выбрать желаемый эффект и установить его в настройках.

API (интерфейс программирования приложений):

.textualizer('pause')
Приостанавливает всю анимацию следующего фрагмента. То есть, как только все символы займут свою позицию, анимация приостановится.

.textualizer('stop')
Останавливает анимацию и удаляет фрагменты.

.textualizer('destroy')
Уничтожает и удаляет экземпляр текстуализатора.

События:

.on('textualizer.changed')
Переключается после завершения анимации фрагмента перед переключением на следующий фрагмент списка.

    txt.on('textualizer.changed', function(event, args) {
      // проверка на последний индекс в массиве
      if (args.index === LAST_INDEX) {
        txt.textualizer('pause');
      }
    });


    txt.textualizer('start');

Поддержка браузеров:

Успешно протестирован на:

Chrome
Safari 4+
Firefox 3.5+
IE 6,7,8,9+
Opera 10.6+
Mobile Safari (iOS 4+)

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

Между <head></head>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script src="textualizer.js"></script>

   <style type="text/css">
        #txtlzr
        {
            font-size: 40px;
            width: 700px;
            height: 300px;
            margin-left: 100px;
            margin-top: 50px;
            border: 1px solid red;
        }
   </style>

Между <body></body>:

      <div id="container">
        <div id="txtlzr">
         <p>Плагин Textualizer  позволяет осуществлять интересные переходы при смене текста. </p>
<p>При переходе с  одного текста на другой, любой символ текущего текста,</p>
<p>являющийся общим для следующего, остается на экране,</p>
<p>и переходит на новое место с разными эффектами.</p>
        </div>
    </div>

Между </body></html>:

  <script type="text/javascript">
    $(function() {
          var txt = $('#txtlzr');
          txt.textualizer();
          txt.textualizer('start');
    })
</script>

Или:

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

Между <head></head>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
    <script src="textualizer.js"></script>

   <style type="text/css">
        #txtlzr
        {
            font-size: 40px;
            width: 700px;
            height: 300px;
            margin-left: 100px;
            margin-top: 50px;
            border: 1px solid red;
        }
   </style>

Между <body></body>:

<div id="container">
        <div id="txtlzr"></div>
    </div>

Между </body></html>:

<script type="text/javascript">
$(function(){var a=$("#txtlzr");a.textualizer("Плагин Textualizer  позволяет осуществлять интересные переходы при смене текста.;При переходе с  одного текста на другой,;любой символ текущего текста, являющийся общим для следующего,;остается на экране и переходит на новое место с разными эффектами.".split(";"), {duration:3E3,effect:"random"});a.textualizer("start")});
</script>

Источник

Смотреть пример – первый вариант кода

Смотреть пример – второй вариант кода

Скачать исходник Размер: 8,60kB | Изменен: 23.01.13 | Загрузок: 174