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

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

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

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

Как сделать бегущую строку 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: #ff0000;">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 — это высота блока

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 height="150" direction="down"/><img src="https://yablogger.info/%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B0%20%D0%BD%D0%B0%20%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D1%83" /></marquee>

<marquee scrollamount="3" direction="up"/><img src="https://yablogger.info/%D1%81%D1%81%D1%8B%D0%BB%D0%BA%D0%B0%20%D0%BD%D0%B0%20%D0%BA%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D1%83" /> Бегущая строка снизу вверх </marquee>

Изображение и текст в бегущей строке:

Приятно было познакомиться! Заходите ещё!

<marquee behavior="scroll" direction="left" ><img src="https://yablogger.info/%D0%A1%D1%81%D1%8B%D0%BB%D0%BA%D0%B0%20%D0%BD%D0%B0%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B5">Текст бегущей строки</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, добавляем код. над названием и описанием блога.
Как добавить бегущую строку в WordPress

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

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

как создать непрерывную бегущую строку? [закрыт]

Хотите улучшить этот вопрос? Добавьте больше подробностей и уточните проблему, отредактировав это сообщение.

Закрыт 4 года назад .

как создать непрерывную бегущую строку?

используйте тег Marquee , но учтите он устарел. Но до сих пор работает.

Бегущую строку можно также реализовать с помощью css

Можно использовать плагин jQuery.Marquee.

  • duplicated – задает непрерывность текста.
  • startVisible – текст должен заполнять пространство при начале.
  • duration – задает время, за которое текст должен прокрутиться.

Если хочется на JS, то пожалуйста 🙂

&#x412;&#x441;&#x451; &#x435;&#x449;&#x451; &#x438;&#x449;&#x435;&#x442;&#x435; &#x43E;&#x442;&#x432;&#x435;&#x442;? Посмотрите другие вопросы с метками javascript или задайте свой вопрос.

дизайн сайта / логотип &#169; 2021 Stack Exchange Inc; материалы пользователей предоставляются на условиях лицензии cc by-sa. rev 2021.12.3.40888

Нажимая &#171;Принять все файлы cookie&#187; вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.

Бегущая строка для картинок. Движущиеся без остановки картинки.

Плагины и Шаблоны для WordPress

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

Бегущая строка для картинок. Движущиеся без остановки картинки.

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

Пример

Плагины и Шаблоны для WordPress

Наша будущая лента с картинками будет работать благодаря jQuery, поэтому нам для начала нужно убедится, что к сайту подключена библиотека jQuery. Если подключена, то пропускаете этот шаг, если нет, то нужно воспользоваться статей Как и где подключить скрипт? и подключить библиотеку:

Далее подключаем сам скрипт, что будет совершать анимацию и прокручивать картинки.

Давайте немного разберем этот скрипт, чтобы вы смогли его настроить под себя.

var marquee = $("#slide_line"); — в первой строке создаем переменную, для чего указываем айди нашего будущего блока с картинками. В данном случаи это — #slide_line.

Далее наш скрипт создает внутри блока с картинками элемент span, которому задаются стили. Данный элемент как раз и является контейнером для будущих картинок. После этого, все это дублируется. то бишь у нас создается копия SPAN с картинками внутри. Именно по этому в 4 строке кода, мы в стилях задаем ширину в 50%, и устанавливаем параметр display:inline-block.

После этого, оба наши span, мы с заключаем в контейнер, родительский div. Ему задаем ширину в 200%.

if ($(window).width() <= ‘800’) — этой строкой мы задаем минимальную ширину страницы в пикселях, при какой анимация остановится и картинки начнут располагаться в столбец.

Если ширина больше, то запускаем анимацию. Там есть значение 13000 что задает время анимации в миллисекундах и оно равно 13 секундам. Именно за это время будут проходить по странице картинки. Можете поменять значение на свое.

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

По коду видно, что в родительский див с айди slide_line подключены изображения. Название айди важно, потому как оно указано и в скрипте выше. В данном примере 10 изображений. Их количество очень важно. Немного ниже, я объясню почему.

Так же нужно задать стили, для корректной работы ленты. Выглядеть они будут примерно так:

Тут важны несколько параметров.

  • overflow:hidden; — в первой строке задан это параметр для #slide_line. он обрежет все что выйдет за пределы блока.
  • #slide_line img — в этой строке мы задаем размеры для картинок. Ширина в 9.4% выбрана не спроста. Если 100% разделить на 10 картинок, то на каждую останется по 10%. Картинка строчный элемент после которого есть маленький отступ, кто знаком с версткой, поймет о чем я. та же ситуация и с SPAN из скрипта, поэтому ширину указываем не 10%, а 9,4%, чтобы все изображения поместились в одну строку и при изменении размера страницы, ничего не поменялось. Вот поэтому, выше я писал. что количество картинок важно. Если вы хотите изменить их количество, то нужно будет правильно вычислить правильную ширину в процентах.
  • @media (max-width:800px) — После этой строки задаем стили для устройств, ширина страницы на которых будет меньше 800 пикселей. Скрипт остановит анимацию, а мы устанавливаем для картинок ширину в 28% но не больше 160px и отступ в 1%.
  • @media (max-width:450px) — Так же как и в предыдущем пункте, задаем стили для устройств с шириной страницы меньше 450 пикселей. Тут изображениям задаем ширину в 99%.

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

На этом все, спасибо за внимание. &#128578;

Если Вам был полезным мой труд, можете финансово поддержать сайт или отключить блокировщик рекламы, что займет 2 минуты 🙂

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

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