Конечно с точки зрения верстальщика - это совершенно ненужные изыски: занимают место, расходуют ресурсы. Со стороны дизайнера и даже оптимизатора - выигрышный элемент: посетитель задерживается на блоге, а это уже положительный поведенческий фактор.
Ну вот с необходимой болтовней для анонса покончено, перейдём к демонстрационной части.
Демо ↓
Работать этот скрипт должен везде, на любом движке, здесь показываю только для 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 - это контейнер для "прокрутки" блурбов, т.е. область с анимированным текстом
- duration: 3000 - время, на которое задерживается каждый блурб на экране
- rearrangeDuration: 1000 - время, за которое каждый символ займёт свою конечную позицию
- centered: true - центрирование текста
4) Стили для контейнера и текста:
<style> #txtlzr { font-size: 25px; width: 700px; height: 120px; } </style>Обязательно чётко нужно указать размеры области.
5) Сам контейнер (скопировать можно в html/javascript гаджет блогспота):
Разработчик и немного документации: kiro.me/textualizer
Красиво смотрится.
ОтветитьУдалитьчайнику объясните: куда вставлять "3) Настраиваем конфигурацию" и "4) Стили для контейнера и текста"
ОтветитьУдалитьКуда хотите. В демо, всё что я описал, я вставил прямо внутрь поста.
ОтветитьУдалитьт.е. скрипт "1)jQuery 1.7.2." и "2)Скрипт textualizer.js." мы кладём в шаблон перед /head?, а скрипт "3)Настраиваем конфигурацию" в само сообщение в режиме html? , а скрипт "4)Стили для контейнера и текста" куда?
ОтветитьУдалитьМожно хоть всё засунуть в сообщение, только про noindex не забудьте.
ОтветитьУдалитьМожно в head 1,2, а 3,4,5 в гаджет.
Можно в head скрипты, 4 в стили блога, 3 и 5 в гаджет или пост.
Можно в head 1,2,3; в стили 4, а 5 в пост или гаджет.
Великолепно! Всё получилось! Спасибо!
ОтветитьУдалить