Бегущая строка html код – Responsive Marquee for Text, HTML and Images или бегущая строка на jQuery для текста, кода или изображений

Leave a Comment / Html / By /

Анимация для сайта. Бегущая строка HTML, тег marquee

Всем привет! Сегодня на seo-mayak.com будет не совсем обычный урок. Речь пойдет об анимации.

Нет, в фотошопе мы разбираться на будем, обойдемся старым добрым HTML и научимся делать несколько анимационных фокусов.

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

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

animaciya-na-saite2

Фотошоп — великая сила, кстати скоро выйдет серия бесплатных видео уроков по анимации картинок, так что подписывайтесь на обновления блога.

Многие вещи можно анимировать без применения фотошопа, средствами обычного HTML, но давайте обо всем по-порядку. Поехали!

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

Итак, знакомьтесь! Волшебный тег — <marquee>

. Изначально этот тег был разработан для браузера Internet Explorer, но со временем и другие браузеры стали поддерживать его применение.

Давайте заставим строку двигаться. Для этого в редакторе WordPress, в HTML режиме вставляем следующее:

<marquee>Бегущая строка</marquee>

Вуаля

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

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

<marquee>Бегущая строка</marquee>

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

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

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

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

По умолчанию тегу <marquee> присвоен атрибут direction со значением left, поэтому строчка без применения атрибутов движется слева направо.

Подставив значение up для атрибута direction мы заставим строчку двигаться снизу вверх:

<marquee direction="up">Бегущая строка</marquee>

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

Значение down укажет строчке двигаться сверху вниз

<marquee direction="down" >Бегущая строка</marquee>

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

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

<marquee scrollamount="30" direction="down">Бегущая строка</marquee>

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

Теперь давайте немного остановимся и разберемся как работает тег <marquee>.

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

По молчанию стоит значение 6, но если задать значение 1, то расстояние между старым и новым положением строчки будет равняться 1 пикселю, что обеспечит медленный и плавный ход бегущей строки:

<marquee scrollamount="1">Бегущая строка</marquee>

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

Атрибут behavior задает способ прокрутки внутри заданного блока и по умолчанию имеет значение scroll, что заставляет бегущую строчку скрываться из виду и начинать движение сначала.

Но если подставить значение alternate, то строчка не будет скрываться из виду, а дойдя до границ блока начнет движение в обратную сторону:


<marquee behavior="alternate" scrollamount="10">Бегущая строка</marquee>

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

Значение slide для атрибута behavior

дает команду бегущей строчке дойти до границы блока и остановиться:


<marquee behavior="slide" scrollamount="10">Бегущая строка</marquee>

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

Атрибут height задает высоту блока. По умолчанию стоит 12 пикселей, но давайте ее изменим и немного добавим к скорости прокрутки бегущей строки:


<marquee direction="up">Бегущая строка</marquee>

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

Атрибут width отвечает за ширину блока. Можно применять атрибуты width и height вместе, чтобы задать желаемые границы блока. Для наглядности добавим рамку в стили и чуть-чуть замедлим скорость прокрутки:


<marquee scrollamount="15" direction="up">Бегущая строка</marquee>

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

Теперь давайте зададим фон для бегущей строки. Для этого применим атрибут bgcolor и поставим для него желтый цвет фона:


<marquee bgcolor="#F5FF37" scrollamount="12" direction="down">Бегущая строка</marquee>

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

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


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

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

Устанавливаем время задержки анимации с помощью атрибута scrolldelay, подставляя числовые значения. По умолчанию стоит 80 миллисекунд:


<marquee scrolldelay="30">Бегущая строка</marquee>

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

Атрибут scrolldelay — это еще один инструмент, с помощью которого мы можем регулировать скорость прокрутки.

Анимация изображений на сайте

Простой пример анимации изображения:


<marquee direction="right"><img src="Путь до катринки" /></marquee>

animaciya-dlya-saita2.1

Конечно сама картинка анимирована в фотошопе, но мы ее заставили перемещаться по странице, создавая эффект движения.

Вот еще интересный пример, с помощью тега marquee можно создать простенький слайдер:


<marquee direction="right" scrollamount="10"><img src="Путь до картинки №1"/><img src="Путь до картинки №2" /><img src="Путь до картинки №3"/><img src="Путь до картинки №4"/><img src="Путь до картинки №5"/></marquee>

Можно каждую картинку в слайдере сделать ссылкой:


<marquee scrollamount="10"><a href="URL статьи №1"><img  src="Путь до изображения №1"  /></a><a href="URL статьи №2"><img src="Путь до изображения №2" /></a><a href="URL статьи №3"><img src="Путь до изображения №3" /></a><a href="URL статьи №"4"><img  src="Путь до изображения №4" /></a><a href="URL статьи №5"2"><img  src="Путь до изображения №5"  /></a></marquee>

В заключение хотел сказать. Анимация штука нужная! Наверняка Вы видели анимированные фавиконы различные баннеры и слайдеры. Анимация широко используется на сайтах.
Я же показал Вам самый простой способ анимации, с помощью тега marquee.
Если Вам понравилась статья, поделитесь с друзьями в соц сетях. А если вдруг будут вопросы, то задавайте их в комментариях. Удачи!

До встречи!

C уважением, Виталий Кириллов

Статьи по теме:

CSS анимация — свойство animation.

Красивая бегущая строка в html примеры

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»onmousedown=»this.stop()» onmouseup=»this.start()»>Туда-сюда на цветном фоне</marquee>

 

Туда-сюда на цветном фоне

 

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

 

<marquee><span><b>Бегущая строка останавливается при наведении</b></span></marquee>

 

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

 

А теперь добавим стили css и украсим нашу бегущую строку, получится цветная бегущая строка:

 

<marquee>Цветная бегущая строка</marquee>

 

Цветная бегущая строка

 

Цветная бегущая строка движется слева направо:

 

<marquee direction=»right»>Цветная бегущая строка слева направо</marquee>

 

Цветная бегущая строка слева направо

 

Настройки:

 

color: #ad0dd9 — цвет текста бегущей строки
font-size: 20px — размер шрифта

 

Сделаем бегущую строку на цветном фоне:

 

<marquee bgcolor=»#e20b0b»>Бегущая строка на цветном фоне</marquee>

 

Бегущая строка на цветном фоне

 

bgcolor— цвет фона
Цветная бегущая строка

 

Чтобы бегущая строка двигалась снизу вверх добавим атрибут direction со значением up:

 

<marquee direction=»up»>Бегущая строка снизу вверх</marquee>

 

Бегущая строка снизу вверх

 

И сразу же добавим еще один атрибут heigh и настроим высоту блока:

 

<marquee direction=»up»>Бегущая строка</marquee>

 

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

 

Настройки:

 

height=»150″- высота блока

color:#0F9D58- цвет текста бегущей строки

font-size: 30px- размер шрифта

 

А теперь заставим бегущую строку двигаться сверху вниз. К атрибуту direction добавим значение down

 

<marquee direction=»down»>Бегущая строка сверху вниз</marquee>

 

Бегущая строка сверху вниз

 

Что бы регулировать скорость прокрутки бегущей строки добавим атрибут scrolldelay :

 

<marquee scrolldelay=»60″>Бегущая строка</marquee>

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

 

Настройка:

 

scrolldelay=»60″ — изменяем цифры и устанавливаем свою скорость прокрутки

 

Что бы указать границы блока добавим к  стилям рамочку, добавим атрибуты width и height.

 

height — это высота блока

width — ширина

scrollamount — атрибут который влияет на скорость движения, чем выше число тем быстрее движется текст.

 

<marquee direction=»down» scrollamount=»3″>Бегущая строка в рамочке</marquee>

 

Бегущая строка в рамочке

 

Сделаем бегущую строку в рамочке на цветном фоне: добавим атрибут bgcolor

 

<marquee bgcolor=»#e20b0b» direction=»down» scrollamount=»2″>Бегущая строка в рамочке на цветном фоне </marquee>

 

Бегущая строка в рамочке на цветном фоне

 

Бегущая строка в html с картинками

 

Картинка движется справа налево:

 

<marquee><img src=»Ссылка на картинку» /></marquee>

 

krasivaya-begushchaya-stroka-v-html-primery

 

Картинка в бегущей строке слева направо:

 

<marquee direction=»right»><img src=»Ссылка на картинку» /></marquee>

 

krasivaya-begushchaya-stroka-v-html-primery
 

Картинка сверху вниз:

 

<marquee direction=»down»/><img src=»ссылка на картинку» /></marquee>

 
krasivaya-begushchaya-stroka-v-html-primery
krasivaya-begushchaya-stroka-v-html-primery

 

<marquee scrollamount=»3″ direction=»up»/><img src=»ссылка на картинку» /> Бегущая строка снизу вверх </marquee>

 

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

 
krasivaya-begushchaya-stroka-v-html-primeryПриятно было познакомиться! Заходите ещё!

 

<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

 

 

Читайте также:

как сделать с помощью тега marquee

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

Как использовать Marquee на практике?

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

<marquee>Текст, который должен прокручиваться</marquee>

<marquee>Текст, который должен прокручиваться</marquee>

Текст, который должен прокручиваться
Если нужна многострочная прокрутка, устанавливается перевод или разрыв строки Html-тегами <p> или <br> внутри текста.

<marquee>Текст прокрутки. <br> Строка ниже.</marquee>

<marquee>Текст прокрутки. <br> Строка ниже.</marquee>

Текст прокрутки.
Строка ниже.
Эта анимация — одна из самых простых, она работает в большинстве браузеров.
Использование атрибутов тега <marquee> дает возможность применять для прокрутки не только текст, но и картинку, изменять направление и скорость движения, фон и шрифт. Наиболее используемые атрибуты — behavior и direction.

Behavior

Атрибут устанавливает, как именно будет прокручиваться текст. Если заданное значение отсутствует, браузер будет использовать вариант по умолчанию — scroll.
Возможные значения:

  • Scroll — непрерывно перемещает справа налево то, что находится между открытым и закрытым тегом.
  • Slide — прокрутка завершается после прохода справа налево.
  • Alternate — перемещение из одного угла в другой с эффектом отскока.

Значение Slide сработает лишь один раз при открытии страницы — обновите ее, чтобы увидеть Slide в действии.

<marquee behavior = ‘slide’>Текст прокрутки</marquee>

<marquee behavior = ‘slide’>Текст прокрутки</marquee>

Текст прокрутки

<marquee behavior = ‘alternate’>Текст прокрутки</marquee>

<marquee behavior = ‘alternate’>Текст прокрутки</marquee>

Текст прокрутки
Behavior = scroll не прописывается, оно применяется браузером автоматически.

Direction

Атрибут задает направление движения бегущей строки — слева направо, справа налево, сверху вниз или снизу вверх. Значения не требуют разбора, поскольку их названия говорят сами за себя — right, left, down, up.

<marquee direction = ‘right’>Текст прокрутки</marquee> <marquee direction = ‘up’>Текст прокрутки</marquee> <marquee direction = ‘down’>Текст прокрутки</marquee>

<marquee direction = ‘right’>Текст прокрутки</marquee>

<marquee direction = ‘up’>Текст прокрутки</marquee>

<marquee direction = ‘down’>Текст прокрутки</marquee>

Текст прокрутки
Текст прокрутки
Текст прокрутки
Вариант по умолчанию — слева направо. Он сработает, если ничего не прописывать в direction.

Скорость — Scrolldelay и Scrollamount

Скорость и плавность перемещения анимации, генерируемой marquee, можно изменить с помощью атрибутов scrolldelay и scrollamount.
Scrolldelay устанавливает интервал между каждым смещением в миллисекундах. Например, «1000» почти остановит строку, а значение, равное «60», заставит элементы двигаться очень быстро.

<marquee scrolldelay=’1000′>Текст прокрутки</marquee>

<marquee scrolldelay=’1000′>Текст прокрутки</marquee>

Текст прокрутки
Значение по умолчанию — 85. Любой вариант ниже 60 будет игнорироваться в некоторых браузерах.

<marquee scrollamount=’40’>Текст прокрутки</marquee>

<marquee scrollamount=’40’>Текст прокрутки</marquee>

Текст прокрутки
Scrollamount определяет скорость строки в виде расстояния между перерисовками. Значение, равное 40, заставит элемент двигаться со скоростью 40 пикселей/кадр.
Loop задает количество показов бегущей строки до ее полной остановки.

<marquee loop=’4′>Текст прокрутки</marquee>

<marquee loop=’4′>Текст прокрутки</marquee>

Текст прокрутки
Значение, равное 4, заставит анимацию запускаться 4 раза, а затем зафиксирует текст на месте.

Как будет выглядеть строка

За внешний вид и красивое оформление информационной строки отвечают эти атрибуты:

  • bgcolor — цвет фона, можно вписать название латиницей или шестнадцатеричное значение, не работает с изображениями;
  • height — высота поля;
  • hspace — горизонтальный отступ;
  • vspace — вертикальный отступ;
  • width — ширина поля.

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

<marquee>Текст прокрутки</marquee>

<marquee>Текст прокрутки</marquee>

Текст прокрутки
Пример кода с одновременным использованием атрибутов:

<marquee direction = ‘up’ bgcolor = «#ff0000»>Текст прокрутки</marquee>

<marquee direction = ‘up’ bgcolor = «#ff0000»>Текст прокрутки</marquee>

Текст прокрутки
Добавление картинки или ссылки в бегущую строку происходит внутри marquee, можно совместить это с текстом или добавить размеры для изображения:

<marquee>Текст <img src=»https://вашакартинка.jpg» alt=»картинка» border=»0″> Еще текст.</marquee> <marquee>Текст до ссылки <a href=»http://вашассылка.ру» >текст для ссылки</a> еще текст.</marquee>

<marquee>Текст <img src=»http://вашакартинка.jpg» alt=»картинка» border=»0″> Еще текст.</marquee>

<marquee>Текст до ссылки <a href=»http://вашассылка.ру» >текст для ссылки</a> еще текст.</marquee>

Текст картинка Еще текст.
Текст до ссылки текст для ссылки еще текст.
В качестве заданных атрибутов могут выступать даже инлайн-стили css.
Для этого достаточно добавить их в код следующим образом:

<marquee>Текст прокрутки</marquee>

<marquee>Текст прокрутки</marquee>

Текст прокрутки
Если необходимо задать дополнительные условия для стилей, они вписываются по аналогии, внутри кавычек, но каждое новое правило должно идти через точку с запятой — как в обычном css3. Если важна валидация кода, marquee не пройдет ее, поскольку не включен в стандарт.

Как использовать тег в WordPress

CMS Вордпресс не позволит вставить тег в статью в визуальном редакторе. Для установки кодов необходимо переключиться в режим Текст.

После сохранения кода в этом режиме он сработает на сайте.

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

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

Создание анимированного текста или картинки в большинстве случаев займет не более одной минуты.

Тег | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
3.0+1.0+4.0+1.0+1.0+1.0+1.0+

Спецификация

HTML:3.24.015.0XHTML:1.01.1

Описание

Тег <marquee> создает бегущую строку на странице. На самом деле содержимое контейнера <marquee> не ограничивается строками и позволяет перемещать (скролировать) любые элементы веб-страницы — изображения, текст, таблицы, элементы форм и т.д. Перемещение можно задать не только по горизонтали, но и вертикали, в этом случае указываются размеры области, в которой будет происходить движение.

Первоначально тег <marquee> был предназначен только для браузера Internet Explorer, но современные версии других браузеров также понимают и поддерживают этот тег.

Синтаксис

<marquee>...</marquee>

Атрибуты

behavior
Задает тип движения содержимого контейнера <marquee>.
bgcolor
Цвет фона.
direction
Указывает направление движения содержимого контейнера <marquee>.
height
Высота области прокрутки.
hspace
Горизонтальные поля вокруг контента.
loop
Задает, сколько раз будет прокручиваться содержимое.
scrollamount
Скорость движения контента.
scrolldelay
Величина задержки в миллисекундах между движениями.
truespeed
Отменяет встроенный ограничитель скорости при низких значениях атрибута scrolldelay.
vspace
Вертикальные поля вокруг содержимого.
width
Ширина области прокрутки.

Закрывающий тег

Обязателен.

Валидация

Этот тег не входит в спецификацию HTML и его наличие приведет к невалидному коду.

Пример

HTML 4.01IECrOpSaFx

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Тег MARQUEE</title>
 </head>
 <body>

  <marquee behavior="alternate" direction="left" bgcolor="#ffcc00">
    Lorem ipsum dolor sit amet...
  </marquee>

 </body>
</html>

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

У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!

имя атрибута

смысл

примечания

BEHAVIOR

Определяет, как должен обрабатываться текст

SCROLL — Появляется с одной стороны, и движется, пока не скроется за другой границей поля, и тогда все повторяется (по умолчанию).

SLIDE — Появляется полностью с одной стороны, движется и исчезает, как только текст касается другого края.

ALTERNATE — появляется полностью с одной стороны, движется в одном направлении, пока не коснется другой границы полосы, после чего меняет направление движения.

BGCOLOR

Определяет цвет фона поля

 

DIRECTION

Определяет направление движения текста

По умолчанию LEFT (по умолчанию) — справа налево.

RIGHT

UP — титры, снизу вверх

HEIGHT

Определяет высоту поля в пикселах или в процентах от высоты экрана.

При определении в процентах параметр n должен быть со знаком «%»

HSPACE

Определяет левый и правый отступ внешнего текста в пикселах.

 

LOOP

Определяет число повторения процесса.

«-1» или INFINITE — число повторений неограниченно

SCROLLAMOUNT

Определяет размер в пикселах между каждым последовательным перемещением текста.

 

SCROLLDELAY

Определяет время в миллисекундах между каждым последовательным перемещением текста.

 

VSPACE

Определяет верхний и нижний отступ внешнего текста в пикселах.

 

WIDTH

Устанавливает длину поля в пикселах или как процент от ширины экрана

 

Пример:

<MARQUEE BGCLOR=#00FF00 DIRECTION=RIGHT
	BEHAVIOR=SCROLL SCROLLAMOUNT=10
	SCROLLDELAY=200>
This is a scrolling marquee.
</MARQUEE>
This is a scrolling marquee.
<MARQUEE behavior=scroll direction=up height=50
	loop=-1 scrollamount=1 scrolldelay=100 width=100>
<CENTER>---<br>
вставьте сюда ваш текст<br>
вставьте сюда ваш текст<br>
вставьте сюда ваш текст<br>
---</CENTER>
</MARQUEE>
—
вставьте сюда ваш текст
вставьте сюда ваш текст
вставьте сюда ваш текст

Этот тег не входит в спецификацию HTML и его наличие приведет к невалидному коду.

с помощью плагина, также CSS и HTML код

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

HTML тег marquee на примере в шапке сайта

Тег marquee создан компанией microsoft для enternet explorer, но впоследствии иммигрировал на остальные браузеры. Смысл прост, заключаем в тег любой элемент, текст, картинку, скрипт и остальное.

Единственный момент, если вставляете в редакторе wordpress при написании страницы или записи, то marquee затрётся. Выход вставлять его в файлы шаблона. Замечу что он не валиден, и при проверке будет ошибка.

Разберём подробно, например, в шапке сайта. За основу возьмём тему twenty nineteen. Посмотрим на синтаксис и применение:

<marquee>задаём текст</marquee>

Так будет выглядеть строка
задаём текст

Как у любой HTML конструкции существуют атрибуты, регулирующие некоторые параметры. В примере ниже разберем два атрибута:

  • behavior конструкция движения
  • scrollamount скорость перемещения

Прописываем behavior и параметр alternate задаст перемещение между краями области, так же scrollamount и например 10:

<marquee behavior="alternate" scrollamount="10">Пишем пример</marquee>

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

Вариант от края до края
Для обзора остальных атрибутов прочитайте эту статью, покажет какие есть возможности и дополнения. Для проверки работы, захожу в wordpress через FTP и редактирую файл header.php и вставляю один из вариантов.

тег marquee на сайте в шапке

В примере расположил перед закрывающим /header. Если возникли проблемы, то пишите нам, обязательно поможем.

Подробнее смотрите в видео.

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

Данный метод считается более чистым и современным в wordpress, но предполагаются более глубокие познания CSS и HTML, 100% работающий с любым дополнением, например под слайдером, так как программирование идёт на уровне CSS. Зададим div и прицепим класс begush.

<div>Задаем что должно выводиться</div>

Теперь идём в файл style.css

Задаём конфигурацию например:

 .begush{overflow: hidden;
    white-space: nowrap; /* Убираем переносы */
    animation: nazvanie-animacii 10s linear infinite normal;}
 @keyframes nazvanie-animacii {
    from { margin-left: 1px; }
    to { margin-left: 600px; }
   }

Результат:

 

Вариантов оформления и вывода новостей море, можно замедлить в необходимых местах или ускорить, пошаговый вывод и т.д. Подробнее почитайте в интернете, статей куча. Основывается способ на связке двух стилей animation, регулирующий подачу, и keyframes, управляющий границами.

Советую к прочтению:

Плагин Ditty News Ticker

Универсальное решение под wordpress плагин Ditty News Ticker. Поиски альтернатив не увенчались успехом, остальные сложные и разобраться необходимо время. Устанавливается Ditty News Ticker стандартным поиском из панели wordpress, либо скачиваем отсюда. В панели появиться новый раздел, заходим и настраиваем первую бегущую строку.

В начале до настроим вордпресс плагин, перейдя во вкладку settings и выбрав чекбокс “Use the visual editor for ticks”. Он добавляет визуальный редактор wordpress в панели бегущей строки. Второй чекбокс не понял что делает, поэтому не отмечаем.

плагин ditty news ticker добавление редактора

Переходим в раздел Add New и работаем над созданием

Заголовок и шорткоды ditty news ticker

  1. Путь до добавления новых бегущих строк
  2. Обязательно пишем название, на сайте не выводиться
  3. Плагин предлагает варианты для вставки, шорткодом и PHP функцией

Перейдём к добавлению новых фраз в список.

добавление текста в плагине бегущей строки wordpress

  1. Выбираем вкладку Ticker Type
  2. default и mixed позволяют в первом случае отображать стандартный вид, второй смешивает
  3. В поле пишем фразы для отображения
  4. При желании в каждую фразу можно поместить ссылку
  5. Тип открытия ссылки, self в этом окне, target в новом
  6. Закрывать ли линк от индексации, тегом noffolow, ставим галочку при необходимости
  7. Добавление поля для следующей записи вордпресс

Такими не хитрыми действиями добавляем остальное. Перейдя в Ticke Mode настраиваем модификацию этой бегущей строки, главные раздел это выбор отображения есть:

Стили отображения бегущей строки

  • Scroll- непрерывно двигающийся текст
  • Rotate- появляется одна фраза, останавливается на несколько секунд, исчезает и появляется новая
  • List- отображение списком, нелепый и ненужный раздел

При выборе модификации, открываются доступные для изменения настройки именно для этого параметра.

В global settings показаны общие настройки независимо от выбора внешнего вида. Например, отображение заголовка, или изменение времени показа бегущей строки, сколько секунд рендерить и т.д. В завершение нажимаем справа кнопку “опубликовать” и используя варианты вставки, выводим на экран.

На клиентском блоге вывод осуществлялся под слайдером с помощью шорткода и никаких споров между плагинами не было. Из инструкции мы узнали как в wordpress добавить бегущую строку, разобрали три вида: HTML, CSS и плагин, выбирайте подходящий, вещь необходимая в рекламе и притягивающая внимание.

 

Если Вам понравилась статья — поделитесь с друзьями

Бегущая строка средствами HTML, тэг marquee

Есть не очень распространненый тэг в HTML — marquee, который прокручивает содержимое в нем. Именно об этом тэге и пойдет речь в этой статье.

Довольно часто встречаются случаи, что даже бывалые веб-программисты удивляются увидев этот тэг.

Тэг <marquee></marquee> динамически прокручивает содержимое по определенным в нем правилам.

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

Пример обычной бегущей строчки:

 

<marquee>Бегущая строчка</marquee>

 

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

Теперь давайте рассмотри атрибуты тэга <marquee>, который позволяют изменить стиль бегущей строки или ее вид:

Атрибут behavior — задает тип движения содержимого тэга, может принимать следующие значения(по-умолчанию scroll):

  • Alternate — Контент перемещается между правым и левым краем элемента.
  • Scroll — Контент перемещается в направлении, заданным атрибутом direction, затем скрывается за пределами области, после чего начинает движение с начала.
  • Slide — Контент перемещается в направлении, заданным атрибутом direction, доходит до края области и останавливается.

Атрибут direction — указывает направление движения содержимого тэга, может принимать следующие значения(по умолчанию left):

  • Down — Движение сверху вниз.
  • Left — Движение справа налево.
  • Right — Движение в правую сторону.
  • Up — Движение вверх.

Атрибут loop — задает, сколько раз будет прокручиваться содержимое, может принимать следующие значения(по умолчанию -1):

  • Любое целое положительное число
  • -1 означает бесконечное повторение

Атрибут scrollamount — скорость движения содержимого, может принимать следующие значения(по умолчанию 6):

  • Любое целое положительное число

Атрибут scrolldelay — величина задержки в миллисекундах между движениями, может принимать следующие значения(по умолчанию 85):

  • Любое целое положительное число миллисекунд

Теперь несколько примеров использования тэга <marquee>:

 

<marquee direction="up">Бегущая строчка</marquee>

 

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

 

<marquee scrollamount="3" direction="right">Бегущая строчка</marquee>

 

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

 

<marquee scrollamount="30">Бегущая <a href="http://www.web.cofp.ru/">строчка</a></marquee>

 

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

 

<marquee behavior="alternate">Бегущая строчка</marquee>

 

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

 

<marquee>
    <a href="http://ihc.ru/?ref=38375"><img alt="ihc 120x240 4" src="/images/system/ihc_120x240_4.gif" /></a>
    <a href="http://www.hostland.ru/order/hosting/?r=8f9c16ea"><img alt="nekisli1" src="/images/system/nekisli1.gif" /></a>
    <a href="http://ihc.ru/?ref=38375"><img alt="ihc 240x400 1" src="/images/system/ihc_240x400_1.gif" /></a>
    <a href="http://ihc.ru/?ref=38375"><img alt="ihc 120x240 3" src="/images/system/ihc_120x240_3.gif" /></a>
</marquee>

 

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

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