Как сделать бегущую строку?

К анимации всегда отношусь настороженно, с ней ведь так легко переборщить.

Для себя принимаю три вида анимации - баннеры с меняющимися (небыстро) картинками, смена картинки при наведении курсором и бегущую строку.

Сегодня расскажу вам о том, как добавить в блог бегущую строку.

Я пробовала у себя добавлять, мне не понравилось, а вот Ира добавила ее в боковую колонку - и мне понравился эффект, поэтому я и решила написать об этом.

Делаем:


1. При создании нового сообщения переходим в режим HTML и вставляем код бегущей строки.

Сам код бегущей строки выглядит так:

<marquee>Здесь пишем текст бегущей строки</marquee>

В режиме Создать вы не увидите движение строки, а вот если нажать на Просмотр, то получится вот такая бегущая строка:

Текст двигается справа налево

2. Можем настроить бегущую строку так, как нам надо.

Выбираем направление движения. Для этого используем вот эти теги:

direction="left"	- влево
direction="right"	- вправо
direction="up"	- вверх
direction="down"	- вниз

Например, мы хотим, чтобы текст чучухал слева направо, пишем вот такой код:

<marquee direction="right">Здесь пишем текст бегущей строки</marquee>

Жмем на Просмотр и видим, что строчка поехала вправо:

Текст двигается слева направо

Задаем "поведение" движения:

behavior="alternate"	- текст двигается вправо до конца, а потом в обратном направлении
behavior="slide"	- текст останавливается в конце строки
loop="4"	- время показывания текста в секундах
scrollamount="2"	- скорость движения, чем больше значение, тем быстрее

Делаем текст красивым))

width="300"	- ширина поля движения текста 300 px
height="100"	- высота поля движения текста 100 px
style="color: #000000"	- цвет текста
bgcolor="#66FFCC"	- цвет фона
bgcolor="style="font-family: Verdana"	- тип шрифта
style="font-size: 11pt"	- размер шрифта
style="font-size: 11pt; color: #000000; font-family: Verdana"	- задаем в одном теге тип, размер и цвет шрифта

Коды цветов можно скопировать вот здесь.

Если нам надо объединить несколько параметров пишем так:

<marquee style="font-family: Verdana; color: #000000; font-size: 11pt" bgcolor="#66FFCC" direction="up" height="100" width="300">Здесь пишем текст бегущей строки</marquee>

Здесь пишем текст бегущей строки


Можем вставить картинку.

Тогда на место текста бегущей строки вставляем код картинки:

<marquee><img src="адрес картинки"></marquee>

Параметры движения картинки тоже можем задавать.

Когда я читала о бегущей строке в интернете, то нашла интересный блог: Азбука блоггера

Нажав на ссылку , вы перейдете на пост, посвященный созданию бегущей строки.  Там же есть автоматический генератор кода строки (в самом низу поста). Можно воспользоваться им, очень удобно!!!
И вообще блог классный, посмотрите - в нем много полезного для нас начинающих программистов))))