Textualizer - эффекты над текстом
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;
}JS
Подключаем jQuery библиотеку, плагин textualizer и инициализируем его:
<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/jаvascript" src="textualizer.min.js"></script>
<script type="text/jаvascript">
$(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 =)
Ссылки
