БЕГУЩАЯ СТРОКА — как сделать на сайте?

 
Оказывается, делается БЕГУЩАЯ СТРОКА на сайте очень просто.
Все бегущие строки создаются с помощью тэгов:  

<marquee>...</marquee>

КОД:

<marquee>БЕГУЩАЯ СТРОКА - как сделать на сайте?</marquee>

ПОЛУЧАЕМ:

БЕГУЩАЯ СТРОКА — как сделать на сайте?

По умолчанию строка движется справа налево и постоянно прокручивается.

 

Чтобы изменить направление движения, используем в тэге
атрибут direction, задающий направление движения.

Для движения направо добавляем атрибут 

="right"

КОД:

<marquee direction="right">БЕГУЩАЯ СТРОКА - как сделать на сайте?</marquee>

ПОЛУЧАЕМ:

БЕГУЩАЯ СТРОКА — как сделать на сайте?

 

Для движения вверх добавляем атрибут 

="up"

Код:

<marquee direction="up">БЕГУЩАЯ СТРОКА - как сделать на сайте?</marquee>

ПОЛУЧАЕМ:

БЕГУЩАЯ СТРОКА — как сделать на сайте?

 

Для движения вниз добавляем атрибут 

="down"

КОД:

<marquee direction="down">БЕГУЩАЯ СТРОКА - как сделать на сайте?</marquee>

 

ПОЛУЧАЕМ:

БЕГУЩАЯ СТРОКА — как сделать на сайте?

 

Кроме команды direction код может содержать атрибут behavior, задающий поведение бегущей строки.

behavior="scroll"

– прокрутка текста ( мне непонятно для чего этот атрибут,  текст по умолчанию всегда прокручивается).

КОД:

<marquee behavior="scroll">БЕГУЩАЯ СТРОКА - как сделать на сайте?</marquee>

ПОЛУЧАЕМ:

БЕГУЩАЯ СТРОКА — как сделать на сайте?

 

Чтобы текст после прокручивания остановился, используем атрибут 

="slide"

(Текст начнет опять прокручиваться только при обновлении страницы)

КОД:

<marquee behavior="slide">БЕГУЩАЯ СТРОКА - как сделать на сайте?</marquee>

ПОЛУЧАЕМ:

БЕГУЩАЯ СТРОКА — как сделать на сайте?

 

Движение текста от одного края страницы до другого задается добавление атрибута 

="alternate"

КОД:

<marquee behavior="alternate">БЕГУЩАЯ СТРОКА</marquee>

ПОЛУЧАЕМ:

БЕГУЩАЯ СТРОКА

 

ДРУГИЕ АТРИБУТЫ:

scrollamount="1"

– скорость движения строки. Может изменяться от 1 до 9.

scrolldelay="20"

– этот атрибут задаёт временной интервал в миллисекундах между шагами бегущей строки.

width="200"

– ширина бегущей строки в пикселях или процентах от ширины экрана.

height="17"

– высота бегущей строки в пикселях или процентах. (Если вы делаете бегущую строку в одну строчку, то можно высоту не указывать, она сама подбирается под размер букв).

bgcolor="#000fff"

– задаёт фоновый цвет бегущей строки. (Вместо ooofff подставляйте свой цвет).

loop="2"

– задаёт число проходов бегущей строки. (Если указать "2" то два раза текст проедет и больше показываться не будет, только если ещё раз обновить страницу).

hspace="70"

- атрибут задает поле в пикселах справа и слева от бегущей строки.

vspace="70"

- атрибут задает отступ в пикселах выше и ниже бегущей строки.

ПОЗИЦИИ СТРОКИ:

align=bottom

- внизу.

align=middle

- посередине.

align=bottom

- внизу.

СТИЛЬ БЕГУЩЕЙ СТРОКИ:

Behavior=alternate

- меняет направление.

Behavior=scroll

- побуквенно исчезает.

Behavior=slide

- мгновенно начинает движение.

Scrollamount=

размер области смещения текста при каждой операции прокрутки

Scrolldelay=

задержка (в миллисекундах) между последовательными смещениями

 

ПРИМЕРЫ:

Зададим скорость движения строки при движении строки вверх.
 
КОД:

<marquee direction="up"scrollamount="3" >БЕГУЩАЯ СТРОКА</marquee>

ПОЛУЧАЕМ:

БЕГУЩАЯ СТРОКА

 

А не добавить ли нам цвета?

bgcolor="#9999ff"


 
КОД:

<marquee direction="up"scrollamount="4"bgcolor="#9999ff" >БЕГУЩАЯ СТРОКА</marquee>


 
ПОЛУЧАЕМ:

БЕГУЩАЯ СТРОКА

 

Чтобы двигалась картинка, заменим текст между тегами ссылкой на картинку.

КОД:

<marquee><img src="//babulyapartner.ru/wp-content/uploads/2013/09/9280b78a99bc35aa60ffc6b32f838c2e-e1378922592548.jpg"></marquee>

ПОЛУЧАЕМ:

 
Экспериментируйте с удовольствием!
Если вам хоть немного помогла эта статья, то нажмите на кнопки СОЦСЕТЕЙ - они перед комментариями. СПАСИБО!

А я желаю ВАМ успехов!
Пожелайте успехов и мне!


ПОДПИШИСЬ НА ОБНОВЛЕНИЯ.
УКАЖИ свой E-MAIL. 

komment



Об авторе Lyudmila Abramochkina

Математик, репетитор по математике, создаю сайты на движке WordPress, провожу курсы и тренинги для новичков по созданию сайтов на движке WordPress.
Закладка Постоянная ссылка.

2 комментария

  1. juliyakrasilya

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

  2. Если вам пригодится этот материал, я буду очень рада! Мне самой это нравится! Просто делюсь, а может быть пишу, чтобы не забыть самой!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.

Добавить изображение