С ЧЕГО НАЧИНАТЬ ЧАЙНИКУ В ИНТЕРНЕТЕ ?

Бегущая строка на сайте

Здравствуйте! Уважаемые посетители моего Блога !

Ко мне за последнее время стали многие обращаться по вопросу HTML кода бегущей строки. И это понятно, что при разработке любого сайта интересным элементом дизайна, привлекающим внимание, может стать бегущая строка. Особенно удобно размещать с её помощью краткие новости, информацию о скидках, распродажах и т.п.

Более того, бегущая строка это самый простой способ создания анимации на сайте. Так же бегущая строка в тексте документа является одним из легких способов оживить Web-страницу. Бегущие объекты всегда привлекают внимание, и пользователь обязательно прочтет то, что там написано.

Но не следует злоупотреблять движущимися объектами и всегда следует помнить, что посетитель может просто не дождаться, когда в бегущей строке отобразится весь текст сообщения и ему не всегда нравится, когда перед глазами пестрит.

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

Для новичков я объясню просто. В детстве Вы собирали конструктор это то же самое, скопируйте готовые коды бегущей строки, а затем начните с ними экспериментировать. Для  Вашего конструктора я постарался все подготовить.

Конструктор Бегущая строка

Бегущая строка формируется с помощью открывающего тега <marquee> и закрывающего </marquee> (закрывающий тег обязателен).

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

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

bgcolor=″…″ — определяет цвет фона бегущей строки.

behavior=″…″ задает тип движения (поведение) бегущей строки и имеет следующие значения

scroll — циклическая прокрутка текста из одного конца в другой

slide — текст появляется с одного края и останавливается у другого.

alternate — текст перемещается от одного края к другому и обратно.

direction=″…″- определяет направление движения бегущей строки. Имеет следующие значения:

left — текст движется влево по строке

right — текст движется вправо по строке

up — вся строка перемещается снизу вверх

down - строка движется сверху вниз

scrollamount=″…″ - шаг перемещения в строке в пикселах, на который перемещается текст за заданный интервал времени. Например

scrollamount= ″1″

scrollamount= ″2″

scrollamount= ″3″

scrolldelay=″…″ — Этот атрибут задаёт временной интервал между шагами бегущей строки в миллисекундах. Например

scrolldelay=″100″

scrolldelay=″200″

scrolldelay=″300″

loop=″…″ - задаёт число проходов текста бегущей строки. По умолчанию или при указании значения -1 (infinite) броузер будет прокручивать текст бесконечное число раз.

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

hspace=″10″

hspace=″0″

vspace=″…″ — Этот атрибут задает отступ в пикселах выше и ниже бегущей строки.

hspace=″0″

hspace=″10″

<center> Выставить по центру ставится в начале кода и </center> закрывающий тег в конце кода.

HTML — коды бегущей строки.

ДОБРО ПОЖАЛОВАТЬ НА МОЙ БЛОГ
<marquee>Сюда вставьте свой текст</marquee>

---

Мой Блог находится http://1.pro2711.ru
<marquee scrollamount="1">Ваш текст</marquee>

---

ПОДПИШИТЕСЬ НА ОБНОВЛЕНИЕ МОЕГО БЛОГА
<marquee scrollamount="3">Ваш текст</marquee>

---

СПАСИБО за подписку!
<marquee scrollamount="30">СПАСИБО за подписку!</marquee>

---

your running text
<marquee direction="right">your running text</marquee>

---

your message here
<marquee behavior="alternate">your message here</marquee>

---

your running text
<marquee height="50" direction="up">your running text</marquee>

---

your running text
<marquee height="50" direction="down">your running text</marquee>

---

your running text
<marquee bgcolor="silver">your running text</marquee>

---

your running text
<marquee direction="right" bgcolor="#color" width="300">your running text</marquee>

---

your running text
<marquee width="100">your running text</marquee>

---

your running text
<marquee width="100" style="border:2px dotted deeppink ;">your running text</marquee>

---

your text here
<marquee direction="left" bgcolor="silver" width="300">your text here</marquee>

---

your exciting message hereyour exciting message hereyour exciting message hereyour exciting message here
<marquee bgcolor="pink" width="25%">your exciting message here</marquee><marquee bgcolor="aqua" width="25%" direction="right">your exciting message here</marquee><marquee bgcolor="silver" width="25%">your exciting message here</marquee><marquee bgcolor="aqua" width="25%" direction="right">your exciting message here</marquee>

---

I love you all and appreciate!
<marquee direction="up" scrollamount="1" height="150" style="filter:wave(add=1, phase=10, freq=2, strength=300); colortag="red";><font color="navy" size=+3>I love you all and appreciate!</font></marquee>

---

$ П Л Я Ш Е М и П О Е М ! !$
<marquee align="middle" behavior="alternate" direction="up" scrolldelay=20 scrollamount=2 height="22" width="4%">$</marquee><marquee align="middle" behavior="alternate" direction="down" scrolldelay=15 scrollamount=2 height="22" width="4%"> П </marquee><marquee align="middle" behavior="alternate" direction="up" scrolldelay=20 scrollamount=2 height="22" width="4%"> Л </marquee><marquee align="middle" behavior="alternate" direction="down" scrolldelay=15 scrollamount=2 height="22" width="4%"> Я </marquee><marquee align="middle" behavior="alternate" direction="up" scrolldelay=20 scrollamount=2 height="22" width="4%"> Ш </marquee><marquee align="middle" behavior="alternate" direction="down" scrolldelay=15 scrollamount=2 height="22" width="4%"> Е </marquee><marquee align="middle" behavior="alternate" direction="up" scrolldelay=15 scrollamount=2 height="22" width="4%"> М </marquee><marquee align="middle" behavior="alternate" direction="down" scrolldelay=15 scrollamount=2 height="22" width="4%"> и </marquee><marquee align="middle" behavior="alternate" direction="up" scrolldelay=15 scrollamount=2 height="22" width="4%"> П </marquee> <marquee align="middle" behavior="alternate" direction="down" scrolldelay=15 scrollamount=2 height="22" width="4%"> О </marquee><marquee align="middle" behavior="alternate" direction="up" scrolldelay=15 scrollamount=2 height="22" width="4%"> Е </marquee> <marquee align="middle" behavior="alternate" direction="down" scrolldelay=15 scrollamount=2 height="22" width="4%"> М </marquee><marquee align="middle" behavior="alternate" direction="up" scrolldelay=20 scrollamount=2 height="22" width="4%"> ! </marquee><marquee align="middle" behavior="alternate" direction="down" scrolldelay=15 scrollamount=2 height="22" width="4%"> !</marquee><marquee align="middle" behavior="alternate" direction="up" scrolldelay=20 scrollamount=2 height="22" width="4%">$</marquee>

---

* Блог Инны Ожилист
* Блог Ольги Живага
* Блог Татьяны Яковлевой
* Блог Юрия Власова

<marquee style="background:pink; padding:10px; border-right: silver 2px solid; border-top: silver 2px solid; border-left: silver 2px solid; border-bottom: silver 2px solid;" scrollamount=1 scrolldelay=60 direction=up width=250 height=60>ВАШ ТЕКСТ</marquee>

---

<marquee><img src="АДРЕС КАРТИНКИ В СЕТИ"></marquee>

---

<marquee direction="right"><img src="АДРЕС КАРТИНКИ В СЕТИ"></marquee>

---

<marquee height="150" direction="up"><img src="АДРЕС КАРТИНКИ"></marquee>

---

<marquee behavior="alternate" direction="down" scrollamount="10"><marquee behavior="scroll" direction="left" scrollamount="10"><img src="АДРЕС КАРТИНКИ" /></marquee></marquee>

---

<marquee width=300 height=100 behavior="alternate" style="border:3px solid red ;"><img src="АДРЕС КАРТИНКИ"></marquee>

---

Ну вот, на сегодня вроде бы и все! Желаю Всем удачи !

Уважаемый посетитель! Моего Блога, если у Вас возникли вопросы, не стесняйтесь, пишите. Отвечу на все Ваши вопросы. Мой E-mail: firmalex@bk.ru

С Уважением! Семенов Александр Skype: atamansav

Комментарии (11) на “Бегущая строка на сайте”