Конечно с точки зрения верстальщика - это совершенно ненужные изыски: занимают место, расходуют ресурсы. Со стороны дизайнера и даже оптимизатора - выигрышный элемент: посетитель задерживается на блоге, а это уже положительный поведенческий фактор.
Ну вот с необходимой болтовней для анонса покончено, перейдём к демонстрационной части.
Демо ↓
Работать этот скрипт должен везде, на любом движке, здесь показываю только для 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 в пост или гаджет.
Великолепно! Всё получилось! Спасибо!
ОтветитьУдалить