Красивая надпись для блога при помощи Textualizer

textualizer-js
Как можно догадаться по названию топика, речь пойдёт о красивых и даже анимированных надписях, которые можно сделать на блоге с помощью скрипта textualizer.js.
Конечно с точки зрения верстальщика - это совершенно ненужные изыски: занимают место, расходуют ресурсы. Со стороны дизайнера и даже оптимизатора - выигрышный элемент: посетитель задерживается на блоге, а это уже положительный поведенческий фактор.
Ну вот с необходимой болтовней для анонса покончено, перейдём к демонстрационной части.

Демо



Работать этот скрипт должен везде, на любом движке, здесь показываю только для Blogger.

Установка
1) jQuery 1.7.2. Можно взять с хостинга скриптов в Яндексе:
<script src="http://yandex.st/jquery/1.7.2/jquery.min.js"></script>

2) Скрипт textualizer.js. Качаем и кладём на хостинг. Затем копируем ссылку в шаблон блога:
<script src="textualizer.js"></script>

Оба скрипта помещаются в секцию /head шаблона блогспота.

3) Настраиваем конфигурацию:
<script>
$(function() {
prettyPrint();
var list = [
'Всё, что не убивает нас сегодня, сделает это завтра',
'Blogger не для чайников  - Чайник не для блоггеров', 
'Сколько мусорное ведро не утрамбовывай - выносить все равно придется', 
'Чем дальше в лес, тем толще партизаны',
'Сделал дело - бабу с воза ',
'Положительное воздействие низкого коэффициента интеллекта на увеличение совокупности задач в процессе осуществления трудовой деятельности',
'Один в поле не трактор',
'Работа не волк, а произведение силы на расстояние',
'Лучше раз потрогать, чем сто раз увидеть',
];
var txt = $('#txtlzr');
txt.textualizer(list, { duration: 3000, effect: 'random', });
txt.textualizer('start');
});
</script>
  • каждая фраза, заключённая в кавычки, сменяется следующей и называется blurb
  • #txtlzr - это контейнер для "прокрутки" блурбов, т.е. область с анимированным текстом
Встроенные эффекты: fadeIn, slideLeft, slideTop и random (случайный, как в демо)
  • duration: 3000 - время, на которое задерживается каждый блурб на экране
  • rearrangeDuration: 1000 - время, за которое каждый символ займёт свою конечную позицию
  • centered: true - центрирование текста

4) Стили для контейнера и текста:
<style>
#txtlzr {
    font-size: 25px;
    width: 700px;
    height: 120px;
    }
</style>
Обязательно чётко нужно указать размеры области.

5) Сам контейнер (скопировать можно в html/javascript гаджет блогспота):



Разработчик и немного документации: kiro.me/textualizer

6 комментариев:

  1. чайнику объясните: куда вставлять "3) Настраиваем конфигурацию" и "4) Стили для контейнера и текста"

    ОтветитьУдалить
  2. Куда хотите. В демо, всё что я описал, я вставил прямо внутрь поста.

    ОтветитьУдалить
  3. т.е. скрипт "1)jQuery 1.7.2." и "2)Скрипт textualizer.js." мы кладём в шаблон перед /head?, а скрипт "3)Настраиваем конфигурацию" в само сообщение в режиме html? , а скрипт "4)Стили для контейнера и текста" куда?

    ОтветитьУдалить
  4. Можно хоть всё засунуть в сообщение, только про noindex не забудьте.
    Можно в head 1,2, а 3,4,5 в гаджет.
    Можно в head скрипты, 4 в стили блога, 3 и 5 в гаджет или пост.
    Можно в head 1,2,3; в стили 4, а 5 в пост или гаджет.

    ОтветитьУдалить
  5. Великолепно! Всё получилось! Спасибо!

    ОтветитьУдалить