Бегущая строка в html | Тег < marquee >

krasivaya-begushchaya-stroka-v-html-primery

 

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

 

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

 

 

 

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

 

Создать бегущую строку не составит большого труда и времени. Что бы заставить текст двигаться без фотошопа был разработан и создан тег html < marquee >, сначала специально для для браузера Internet Explorer, а затем и все остальные браузеры начали обрабатывать и поддерживать тег.

 

Что самое приятное и удивительное это очень маленький и коротенький тег, который приводит в движение не только текст, но и картинки. Чудеса да и только!

 

К примеру, что бы текст двигался справа налево нужно вставить код:

 

<marquee>Тут вставляем текст бегущей строки</marquee>

 

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

 

Приветствие:

 
Hello,my name is Galya

 

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

 

Можно настроить бегущую строку добавив стили и атрибуты. По умолчанию бегущая строка движется только справа налево, чтобы изменить направление строки надо к тегу добавить атрибут direction со значением right

 

<marquee direction="right">Бегущая строка cлева направо</marquee>

 

Бегущая строка cлева направо

 

Что бы текст не исчезал за границы и двигался туда-сюда нужно добавить атрибут 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)

 

  1. В редакторе сообщений открываем вкладку НTML и вставляем код. Вначале редактируем текст, потом добавляем код и сразу Публикуем. В визуальный редактор переходить не надо, слетят все настройки, результат смотрите на блоге.
  2. Панель инструментов > Дизайн > Добавить гаджет > HTML/JavaScript, добавляем код.
  3. Вставить гаджет в шапку над названием и описанием блога.

 

Как добавить бегущую строку в WordPress

 

В записи открываем Html редактор или вкладку "Текст" вставляем код бегущей строки и нажимаем "Опубликовать". Редактировать статью только в этих вкладках, в визуальном редакторе настройки слетают и придется делать все сначала. Если изменения в статье сделать необходимо, заходим через Консоль > Все записи > Изменить. В такой последовательности открывается запись в html редакторе.

 

Добавляем бегущую строку в боковую колонку: Консоль > Внешний вид > Виджеты > Текст > Добавить виджет. Вставляем код и сохраняем.

 

Как вставить бегущую строку в шапку или в подвал сайта? В верхнем меню админ панели вордпресс выбираем вкладку "Настроить". В меню настроек находим "Пользовательский код". Должно открыться два окошка куда можно вставить код бегущей строки: скрипты в хедере и скрипты в подвале сайта. Во всех темах по разному. Если отсутствуют пользовательские коды в настройках добавляем код в файлы. Заходим в Темы > Редактор, находим нужный файл и вставляем код. Что бы бегущая строка была в шапке добавляем код в header.php, для вывода в подвале в файл footer.php

 

 

Будь вместе с Я Блоггер

 

Будь в тренде!

Получай материалы прямиком в свою почту

Я даю согласие на сбор и обработку своих персональных и не персональных данных согласно действующей на сайте — политике конфиденциальности.
* Нажимая на кнопку "Отправить", "Подпишись" или "Комментировать" Вы соглашаетесь с пользовательским соглашением.

Комментарии 11

  • Александр

    Как сделать больше размер бегущей строки?

    Ответить
    • Галина Молдованова

      Александр, здравствуйте. Вы наверное плохо прочитали статью от начала до конца. Бегущая строка это текст или картинка которая движется. Есть тег < marquee >, но сам по себе он не будет делать никакие движения, текст или картинка должны быть помещены между открывающим и закрывающим тегом < marquee >между ними текст или картинка< /marquee >.

      В открывающем теге < marquee указываем все стили, атрибуты и события для бегущей строки>. Чтобы изменить размер шрифта бегущей строки нужна такая конструкция < marquee style="font-size: 40px" > текст < /marquee >. При этом семейство шрифтов у вас будет какое указано на сайте в стилях.

      Все стили : цвет, размер шрифта, курсив, семейство шрифтом начинается с style=" тут указываем все стили через точку с запятой".

      Ответить
  • Владимир

    Хотелось бы получить скрипт такой бегущей строки как в самом верху вашей статьи 🙂

    Ответить
  • Владимир
    Ответить
  • Егор

    А как управлять скоростью при таком варианте?
    Цветная бегущая строка

    Ответить
  • Любовь

    Супер, так все спокойненько, аккуратненько, последовательно и просто разъяснено! Респект Респект!!! БЛАГОДАРЮ! подписалась)

    Ответить
  • Любовь

    Вставила ссылку "цветная табличка с бегущим текстом" на сайте в окно HTML но ..почему то не работает (((

    Ответить
  • Андрей

    Огромное спасибо, статья классная, всё, что нужно, в ней есть. Удивляюсь, что у кого-то остаются вопросы.

    Ответить
    • БлагоДарю за такой чудесный отзыв! Взамен оставила ссылку на ваш сайт, у вас тоже прекрасные статьи! Всех благ и удачи в нашем нелегком труде!:-)

      Ответить
  • Дима

    Класс!

    Ответить

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

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

Яндекс.Метрика