Бегущая строка- элемент в веб-дизайне для привлечения внимания, чаще используется в рекламных целях. Бегущая строка это просто напросто текст который движется, слева направо, справа налево или вверх вниз.
В бегущую строку можно вставить новость, объявление, приветствие, отобразить текущее время и дату и много много другой интересной информации.
Как сделать бегущую строку html на сайте
Создать бегущую строку не составит большого труда и времени. Что бы заставить текст двигаться без фотошопа был разработан и создан тег html < marquee >, сначала специально для для браузера Internet Explorer, а затем и все остальные браузеры начали обрабатывать и поддерживать тег.
Что самое приятное и удивительное это очень маленький и коротенький тег, который приводит в движение не только текст, но и картинки. Чудеса да и только!
К примеру, что бы текст двигался справа налево нужно вставить код:
<marquee>Тут вставляем текст бегущей строки</marquee>
Приветствие:
В принципе бегущую строку можно вставить куда душа пожелает: в футер, сайдбар, под шапкой блога или в саму шапку.
Можно настроить бегущую строку добавив стили и атрибуты. По умолчанию бегущая строка движется только справа налево, чтобы изменить направление строки надо к тегу добавить атрибут direction со значением right
<marquee direction="right">Бегущая строка cлева направо</marquee>
Что бы текст не исчезал за границы и двигался туда-сюда нужно добавить атрибут behavior со значением alternate
<marquee behavior="alternate">Бегущая строка перемещается между правым и левым краем</marquee>
<marquee behavior="alternate" bgcolor="#e20b0b" direction="right" style="color: #ffffff; font-size: 20px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;"onmousedown="this.stop()" onmouseup="this.start()">Туда-сюда на цветном фоне</marquee>
Бегущая строка останавливается при наведении
<marquee onmouseout="this.start()" onmouseover="this.stop()"><span style="color: red;"><b>Бегущая строка останавливается при наведении</b></span></marquee>
А теперь добавим стили css и украсим нашу бегущую строку, получится цветная бегущая строка:
<marquee style="color:#470dd9; font-size: 20px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Цветная бегущая строка</marquee>
Цветная бегущая строка движется слева направо:
<marquee direction="right" style="color: #ad0dd9; font-size: 20px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Цветная бегущая строка слева направо</marquee>
Настройки:
color: #ad0dd9 - цвет текста бегущей строки
font-size: 20px - размер шрифта
Сделаем бегущую строку на цветном фоне:
<marquee bgcolor="#e20b0b">Бегущая строка на цветном фоне</marquee>
bgcolor- цвет фона
Цветная бегущая строка
Чтобы бегущая строка двигалась снизу вверх добавим атрибут direction со значением up:
<marquee direction="up" style="color:#f2132d; font-size: 30px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка снизу вверх</marquee>
И сразу же добавим еще один атрибут heigh и настроим высоту блока:
<marquee height="150" direction="up" style="color:#0F9D58; font-size: 30px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Настройки:
height="150"- высота блока
color:#0F9D58- цвет текста бегущей строки
font-size: 30px- размер шрифта
А теперь заставим бегущую строку двигаться сверху вниз. К атрибуту direction добавим значение down
<marquee height="150" direction="down" style="color:#1C3850; font-size: 20 px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка сверху вниз</marquee>
Что бы регулировать скорость прокрутки бегущей строки добавим атрибут scrolldelay :
<marquee scrolldelay="60" style="color:#0F9D58; font-size: 30px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;">Бегущая строка</marquee>
Настройка:
scrolldelay="60" - изменяем цифры и устанавливаем свою скорость прокрутки
Что бы указать границы блока добавим к стилям рамочку, добавим атрибуты width и height.
height - это высота блока
width - ширина
scrollamount - атрибут который влияет на скорость движения, чем выше число тем быстрее движется текст.
<marquee direction="down" height="150" scrollamount="3" style="border: 2px solid #000000; text-align: center; color: #f2132d; font-size: 30px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;" width="300">Бегущая строка в рамочке</marquee>
Сделаем бегущую строку в рамочке на цветном фоне: добавим атрибут bgcolor
<marquee bgcolor="#e20b0b" direction="down" height="150" scrollamount="2" style="border: 2px solid #000000; text-align: center; color: #fbfbfc; font-size: 30px; font-weight: bolder; line-height: 150%; text-shadow: #000000 0px 1px 1px;" width="300">Бегущая строка в рамочке на цветном фоне </marquee>
Бегущая строка в html с картинками
Картинка движется справа налево:
<marquee><img src="Ссылка на картинку" /></marquee>
Картинка в бегущей строке слева направо:
<marquee direction="right"><img src="Ссылка на картинку" /></marquee>
Картинка сверху вниз:
<marquee height="150" direction="down"/><img src="ссылка на картинку" /></marquee>
<marquee scrollamount="3" direction="up"/><img src="ссылка на картинку" /> Бегущая строка снизу вверх </marquee>
Изображение и текст в бегущей строке:
<marquee behavior="scroll" direction="left" ><img src="Ссылка на изображение">Текст бегущей строки</marquee>
Ссылка на картинку- https://yablogger.info/wp-content/uploads/2017/04/oe_4f64887337494ff581c5168e37bc4d51.gif
Вставляем картинку на сайт в черновик и в html редакторе находим url картинки или загружаем на специализированный ресурс для публикации изображений на сайтах, блогах, чатах и берем оттуда ссылку.
Как вставить ссылку в бегущую строку
<marquee> Текст перед ссылкой <a href="url адрес ссылки" title="Всплывающий текст при наведении курсора на ссылку">Анкор (текст ссылки)</a></marquee>
Как вставить бегущую строку в Blogger (Blogspot)
- В редакторе сообщений открываем вкладку НTML и вставляем код. Вначале редактируем текст, потом добавляем код и сразу Публикуем. В визуальный редактор переходить не надо, слетят все настройки, результат смотрите на блоге.
- Панель инструментов > Дизайн > Добавить гаджет > HTML/JavaScript, добавляем код.
- Вставить гаджет в шапку над названием и описанием блога.
Как добавить бегущую строку в WordPress
В записи открываем Html редактор или вкладку "Текст" вставляем код бегущей строки и нажимаем "Опубликовать". Редактировать статью только в этих вкладках, в визуальном редакторе настройки слетают и придется делать все сначала. Если изменения в статье сделать необходимо, заходим через Консоль > Все записи > Изменить. В такой последовательности открывается запись в html редакторе.
Добавляем бегущую строку в боковую колонку: Консоль > Внешний вид > Виджеты > Текст > Добавить виджет. Вставляем код и сохраняем.
Как вставить бегущую строку в шапку или в подвал сайта? В верхнем меню админ панели вордпресс выбираем вкладку "Настроить". В меню настроек находим "Пользовательский код". Должно открыться два окошка куда можно вставить код бегущей строки: скрипты в хедере и скрипты в подвале сайта. Во всех темах по разному. Если отсутствуют пользовательские коды в настройках добавляем код в файлы. Заходим в Темы > Редактор, находим нужный файл и вставляем код. Что бы бегущая строка была в шапке добавляем код в header.php, для вывода в подвале в файл footer.php
Будь вместе с Я Блоггер
Как сделать больше размер бегущей строки?
Александр, здравствуйте. Вы наверное плохо прочитали статью от начала до конца. Бегущая строка это текст или картинка которая движется. Есть тег < marquee >, но сам по себе он не будет делать никакие движения, текст или картинка должны быть помещены между открывающим и закрывающим тегом < marquee >между ними текст или картинка< /marquee >.
В открывающем теге < marquee указываем все стили, атрибуты и события для бегущей строки>. Чтобы изменить размер шрифта бегущей строки нужна такая конструкция < marquee style="font-size: 40px" > текст < /marquee >. При этом семейство шрифтов у вас будет какое указано на сайте в стилях.
Все стили : цвет, размер шрифта, курсив, семейство шрифтом начинается с style=" тут указываем все стили через точку с запятой".
Хотелось бы получить скрипт такой бегущей строки как в самом верху вашей статьи 🙂
Как вот эта https://yablogger.info/wp-content/uploads/begushhaya-stroka.gif
А как управлять скоростью при таком варианте?
Цветная бегущая строка
Супер, так все спокойненько, аккуратненько, последовательно и просто разъяснено! Респект Респект!!! БЛАГОДАРЮ! подписалась)
Спасибо большое!!!
Вставила ссылку "цветная табличка с бегущим текстом" на сайте в окно HTML но ..почему то не работает (((
Огромное спасибо, статья классная, всё, что нужно, в ней есть. Удивляюсь, что у кого-то остаются вопросы.
БлагоДарю за такой чудесный отзыв! Взамен оставила ссылку на ваш сайт, у вас тоже прекрасные статьи! Всех благ и удачи в нашем нелегком труде!:-)
Класс!