Эффектная смена текста

Textualizer

~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
  ~lt~meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /~gt~
  ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~
  ~lt~script src="/plagins/textualizer/textualizer.min.js"~gt~~lt~/script~gt~
  ~lt~style~gt~
    #txtzr{height:165px; padding:15px; text-align:center; font:normal 15pt Arial,sans-serif; }
  ~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
  ~lt~div id="txtzr"~gt~
    ~lt~p~gt~Textualizer is a jQuery plug-in that allows you to transition through blurbs of text. ~lt~/p~gt~
    ~lt~p~gt~When transitioning to a new blurb, any character that is common to the next blurb is kept on the screen, and moved to its new position.~lt~/p~gt~
    ~lt~p~gt~Textualize: verb - to put into text, set down as concrete and unchanging.  Use Textualizer to transition through blurbs of text.~lt~/p~gt~
    ~lt~p~gt~Blurb: noun - a short summary or some words of praise accompanying a creative work.  A promotional description.~lt~/p~gt~
  ~lt~/div~gt~
  ~lt~script~gt~
    $('div').textualizer();
    $('div').textualizer('start');
  ~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~

Описание

Свойства

Методы

Плагин Textualizer позволяет эффектно сменять параграфы с текстом. Такой эффект отлично подойдет для презентационных разделов сайта. Плагин реализует три эффекта для появления текста (+ четвертый — перемешанный) и позволяет задавать продолжительность анимации и продолжительность сохранения текста в готовом состоянии.

Замечание: у блока, в котором будут размещаться сменяющиеся параграфы текста, должна быть задана фиксированная высота (не auto). Иначе тексты не будут видны.

Подключение и использование

Чтобы плагин стал доступен на странице необходимо подключить файл с библиотекой jQuery и файл с плагином (можно скачать на официальной странице):

~lt~script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"~gt~~lt~/script~gt~
~lt~script type="text/javascript" src="textualizer.min.js"~gt~~lt~/script~gt~

После этого применить плагин можно двумя способами:

Применить плагин к блочному элементу, в котором находятся параграфы с текстами (именно они и будут сменять друг друга).
Применить плагин к пустому блочному элементу, а тексты задать в первом параметре метода, массивом строк.

// #1
~lt~div id="tx1"~gt~
  ~lt~p~gt~Первый текст.~lt~/p~gt~
  ~lt~p~gt~Второй текст.~lt~/p~gt~
  ~lt~p~gt~Третий текст.~lt~/p~gt~
~lt~/div~gt~

~lt~script~gt~
  $('#tx1').textualizer();
  $('#tx1').textualizer('start')
~lt~/script~gt~


// #2
~lt~div id="tx2"~gt~~lt~/div~gt~

~lt~script~gt~
  $('#tx1').textualizer(['Первый текст', 'Второй текст', 'Третий текст']);
  $('#tx1').textualizer('start')
~lt~/script~gt~

Как вы уже могли заметить, плагин обладает командой start, которая и запускает эффект. Всего существует четыре команды: start, pause, stop и destroy (их описание можно посмотреть во вкладке команды).

Так же, плагин обладает несколькими настройками, которые можно задавать при инициализации плагина на элементе (см. вкладку свойства).

Информация

Размер плагина ~5k

Официальная страница

Работает во всех современных браузерах:

IE 6+
Chrome
Firefox 3.5+
Opera 10.6+
Safari 4+
Mobile Safari (iOS 4)

↓ название :типы значений (значение по умолчанию)

duration:integer(1000)

Это свойство отвечает за длительность (в миллисекундах) отображения одного блока текста.

// ------- Работа со свойством duration ---------
// в момент установки плагина на элемент
$(".textBox").textualizer({ onResize:10000 });
 
// если текст задается в textualizer, параметры задаются после:
$(".textBox").textualizer(
  ['Текст 1', 'Текст 2'], 
  { onResize:10000 }
);

rearrangeDuration:integer(1000)

Это свойство отвечает за длительность (в миллисекундах) скрытия текстового блока.

// ------- Работа со свойством duration ---------
// в момент установки плагина на элемент
$(".textBox").textualizer({ rearrangeDuration:5000 });
 
// если текст задается в textualizer, параметры задаются после:
$(".textBox").textualizer(
  ['Текст 1', 'Текст 2'], 
  { rearrangeDuration:5000 }
);

effect:string('random')

Это свойство отвечает за эффекты при появлении и исчезновении букв в сменяющихся текстах. Возможные значения:

"fadeIn" (варьирование прозрачности)
"slideLeft" (движение слева на право)
"slideTop" (движение сверху вниз)
"random" (смешанные эффекты)

// ------- Работа со свойством effect ---------
// в момент установки плагина на элемент
$(".textBox").textualizer({ effect:"fadeIn" });
 
// если текст задается в textualizer, параметры задаются после:
$(".textBox").textualizer(
  ['Текст 1', 'Текст 2'], 
  { effect:"fadeIn" }
);

centered:boolean(false)

Если задать это свойство в true, сменяющиеся тексты будут центрированы.

// ------- Работа со свойством centered ---------
// в момент установки плагина на элемент
$(".textBox").textualizer({ centered:true });
 
// если текст задается в textualizer, параметры задаются после:
$(".textBox").textualizer(
  ['Текст 1', 'Текст 2'], 
  { centered:true }
);

↓ Способ вызова

.textualizer('start')

Эта команда запускает выполнение анимированой смены текста или возобновляет ее после приостановки командами 'pause' или 'stop'.

.textualizer('pause')

После вызова этой команды смена текстов будет остановлена (если в момент ее вызова, новый текст еще не появился полностью, он завершит анимацию и окажется виден). Если после этого вызвать команду 'start', смена текстов продолжится.

.textualizer('stop')

После вызова этой команды смена текстов будет остановлена, и ни один из текстов не окажется на экране. Если после этого вызвать команду 'start', смена текстов продолжится.

Замечание: — практика показывает, что эта команда иногда, работает не правильно. После ее вызова остается не скрыта часть текста. Возможно в скором времени эта ошибка будет исправлена.

.textualizer('destroy')

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

Эффектная смена текста

Textualizer

Подключение и использование

Информация

Функции по категориям

Навигация