Как сделать бегущую строку?
К анимации всегда отношусь настороженно, с ней ведь так легко переборщить.
Для себя принимаю три вида анимации - баннеры с меняющимися (небыстро) картинками, смена картинки при наведении курсором и бегущую строку.
Сегодня расскажу вам о том, как добавить в блог бегущую строку.
Я пробовала у себя добавлять, мне не понравилось, а вот Ира добавила ее в боковую колонку - и мне понравился эффект, поэтому я и решила написать об этом.
Делаем:
1. При создании нового сообщения переходим в режим HTML и вставляем код бегущей строки.
Сам код бегущей строки выглядит так:
В режиме Создать вы не увидите движение строки, а вот если нажать на Просмотр, то получится вот такая бегущая строка:
Жмем на Просмотр и видим, что строчка поехала вправо:
Для себя принимаю три вида анимации - баннеры с меняющимися (небыстро) картинками, смена картинки при наведении курсором и бегущую строку.
Сегодня расскажу вам о том, как добавить в блог бегущую строку.
Я пробовала у себя добавлять, мне не понравилось, а вот Ира добавила ее в боковую колонку - и мне понравился эффект, поэтому я и решила написать об этом.
Делаем:
1. При создании нового сообщения переходим в режим HTML и вставляем код бегущей строки.
Сам код бегущей строки выглядит так:
В режиме Создать вы не увидите движение строки, а вот если нажать на Просмотр, то получится вот такая бегущая строка:
2. Можем настроить бегущую строку так, как нам надо.
Выбираем направление движения. Для этого используем вот эти теги:
Например, мы хотим, чтобы текст чучухал слева направо, пишем вот такой код:
Выбираем направление движения. Для этого используем вот эти теги:
| direction="left" | - влево |
| direction="right" | - вправо |
| direction="up" | - вверх |
| direction="down" | - вниз |
Например, мы хотим, чтобы текст чучухал слева направо, пишем вот такой код:
Жмем на Просмотр и видим, что строчка поехала вправо:
Задаем "поведение" движения:
| 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" | - задаем в одном теге тип, размер и цвет шрифта |
Коды цветов можно скопировать вот здесь.
Если нам надо объединить несколько параметров пишем так:
Можем вставить картинку.
Тогда на место текста бегущей строки вставляем код картинки:
Параметры движения картинки тоже можем задавать.
Немає коментарів:
Дописати коментар