16 октября 2012 г.

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

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

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

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

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

Делаем:


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"
- задаем в одном теге тип, размер и цвет шрифта

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

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



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


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

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



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

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

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


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

  1. Лена, спасибо большущее за то, что тратишь свое время, чтобы объяснить нам, чайникам, такие вещи!

    ОтветитьУдалить
  2. Лена! Ну что бы мы без тебя и твоих очень умных мозгов делали?
    Мой муж очень плотно работает с компьютерами и всякими програмульками, но как у сапожника без сапог, до моего блогаего длинные руки не доходят.
    спасибо тебе, дружище!!

    ОтветитьУдалить
  3. Лена, спасибо за посты по блоговедению, очень нужная информация.

    ОтветитьУдалить
  4. Лена спасибо!
    очень полезная информация, пошла пробовать ;)

    ОтветитьУдалить
  5. Лена, спасибо вам!
    Вы не только великолепные сумки делаете, но о интересных и полезных фишках для блога пишите :)

    ОтветитьУдалить
  6. Давно на "Азбуке" сижу - оч. люблю страницу с таблицей цветов! :))

    ОтветитьУдалить
  7. Спасибо большое, у Вас всегда очень полезные уроки. Может в будущем его применю:))

    ОтветитьУдалить
  8. Вот это да!!! Оказывается, все так просто (особенно, когда знаешь)))) Лена, спасибо за подсказку и МК!!!

    ОтветитьУдалить
  9. А как делать на главной странице?

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

Я с большим удовольствием читаю ВСЕ ваши комментарии! Спасибо!!!