Textualizer - jQuery плагин для создания красивых эффектов над текстом.
Поддерживается работа в: Chrome, Safari 4+, Firefox 3.5+, IE 6,7,8,9+, Opera 10.6+, Mobile Safari (iOS 4)

Разметка HTML

Контейнер в котором и будет отображаться текст:

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

CSS

Например такое оформление:

#txtlzr {
    font-family: 'Amaranth',sans-serif;
    margin-top: 20px;
    font-size: 30px;
    width: 700px;
    height: 120px;
}

javascript

Подключаем jQuery библиотеку, плагин textualizer и инициализируем его:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<script type="text/javascript" src="textualizer.min.js"></script>     
<script type="text/javascript">
$(function() {

      var list = ['Привет веб-мастерам и всем тем, кто стремится стать ими. Наш сайт постарается вам помочь в таком интересном ремесле, как веб-строительсво.Давайте делать "красивые сайты". '
                ,'Мы конечно не форум помощи, а скорее библиотека web гаджетов для web-мастеров. Ищите скрипты, смотрите Демо и качайте Исходники. '
                , 'Хороший сайт сложно собрать без винтиков, гаечек и инструмента, которым нужно подкрутить и затянуть покрепче.'
                , 'Мы и будем предлагать вам эти винтики... '];

      var txt = $('#txtlzr');

      txt.textualizer(list, { duration: 3000, centered:true });
      txt.textualizer('start');
})
</script>

Опции:

  •   var list = ['первый абзац', 'второй абзац', 'третий абзац'];  // Абзацы текста
  •   var txt = $('#txtlzr');  // Контейнер в котором рендерится текст

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

  •   txt.textualizer(list, options); // это textualize
  •   txt.textualizer('start'); // запуск

API

  •     .textualizer('pause') - После того как анимация одного абзаца завершилась, textualizer встает на пазу
  •     .textualizer('stop') - остановка анимаций и удаление абзацев
  •     .textualizer('destroy') - уничтожить textualizer =)

СКАЧАТЬСкачек: 484
6,62 Kb
Кто скачал?

ДЕМОПосмотреть
пример