js Плагин Textualizer 

Дата публикации  Дата изменения25.01.15  КомментарииНет   Просмотры1064

Плагин 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 | Загрузок: 30
Бесплатные курсы

Категории

Теги: , , ,

Оцените материал:

Рейтинг: 3.0/10 (1)


КомментарииКомментарии:

Нет комментариев к этой статье.


Поля, обозначенные как *, обязательны.





Максимальная длина сообщения 900 символов. Осталось   символов

 

Старые →← Новые