Бегущая строка на сайте с помощью HTML

Бегущая строка на сайте с WordPress без плагинов

Бегущая строка на сайте с помощью HTML

Как создать, отформатировать текст, изменить направление движения, скорость, а также заставить двигаться изображение или по изображению

Иногда для привлечения внимания к какому-то элементу на сайте, возникает желание создать для него анимацию. Как по мне, самой простой анимацией является так называемая бегущая строка. И сегодня я покажу, как её создать за 1 минуту без плагинов и фотошопа. Силами одного лишь HTML. Для этого в языке HTML создан специальный тег marquee. И всё, что мы поместим внутрь этого тега, будет двигаться.
Выйду в поле ночью с конем

Код этой бегущей строки будет такой:

<marquee>Выйду в поле ночью с конем</marquee>

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

Ночкой темной тихо пойдем
<marquee  style="color:green;font-size:40px;padding: 20px;background: beige;border: 1px solid red;">Ночкой темной тихо пойдем</marquee>

Возможности стилизации этого тега такие же, как у любого div’a и span’a. то есть мы можем задать его высоту, ширину, фон, рамки, отформатировать текст и много другое.

Дополнительные возможности

Кроме стилизации текста, у самого тега есть несколько дополнительных возможностей. А именно:

Направление текста

За это отвечает команда direction. По умолчанию у нее стоит значение left, но мы можем спокойно заменить его на

 

right (движение текста направо)
Слева направо
КОД
<marquee direction="right"  style="color:green;font-size:40px;padding: 20px;background: beige;border: 1px solid red;">Слева направо</marquee>
up (движение снизу вверх)
Снизу вверх
КОД
<marquee direction="up"  style="color:green;font-size:40px;padding: 20px;background: beige;border: 1px solid red;height:100px;">Снизу вверх</marquee>
down (движение сверху вниз)
Сверху вниз
КОД
<marquee direction="down"  style="color:green;font-size:40px;padding: 20px;background: beige;border: 1px solid red;text-align:right;height:100px;">Сверху вниз</marquee>

Скорость движения текста

Для этого есть команда scrollamount. По умолчанию в значении этой команды цифра 6, но мы можем менять его на любое число от 1 (самое медленное движение) и до бесконечности. Число здесь — это шаг движения в пикселях. Поэтому, если поставить цифру, которая больше ширины экрана, то текст будет «моргать».

Скорость движения 1 пиксель (самая медленная)

Черепаха
<marquee scrollamount="1"  style="color:green;font-size:40px;padding: 20px;background: beige;border: 1px solid red;">Черепаха</marquee>

Скорость движения 80 пикселей

Маршрутка
<marquee scrollamount="80"  style="color:green;font-size:40px;padding: 20px;background: beige;border: 1px solid red;">Маршрутка</marquee>

Скорость движения 1920 пикселей (моя ширина экрана)

25 кадр

<marquee scrollamount=»1920″ style=»color:green;font-size:40px;padding: 20px;background: beige;border: 1px solid red;»>25 кадр</marquee>

Ограниченность прокрутки

Теперь давайте закроем текст в камеру, из которой он не сможет выбраться (И камера эта будет надежнее, чем у героя Билла Скарсгорда в 1 сезоне сериала Castle Rock).

Для этого нам понадобится команда behavior. По умолчанию у неё стоит значение scroll. Поэтому текст пропадает и появляется с другого края. Чтобы это изменить, нам надо заменить значение команды на alternate.

Свободу попугаям!
<marquee behavior="alternate"  style="color:green;font-size:40px;padding: 20px;background: beige;border: 1px solid red;">Свободу попугаям</marquee>

А если нам надо, чтобы текст просто прошел до конца строки и остановился, то значение команды надо заменить на slide.

Российская экономика
<marquee behavior="slide"  style="color:green;font-size:40px;padding: 20px;background: beige;border: 1px solid red;">Российская экономика</marquee>

Если Вы дочитали до этого места и не видели движение фразы «Российская экономика» (хотя и движение самой российской экономики Вы тоже вряд ли видели), то просто нажмите на клавиатуре F5 (сверху, между 6 и 7), чтобы страница обновилась.

Движение изображения

Тут всё так же, как у текста, только вместо самого текста надо вставить код изображения.

Бегущая строка на сайте с фотографией
<marquee><img src="адрес изображения" /></marquee>

Также можно разместить любое количество изображение подряд

Бегущая строка на сайте с Wordpress без плагиновБегущая строка на сайте с Wordpress без плагиновБегущая строка на сайте с Wordpress без плагинов
<marquee><img  src="адрес изображения 1" /><img  src="адрес изображения 2" /><img  src="адрес изображения 3" /></marquee>

Движение текста по изображению

Ну и напоследок пустим бегущую строку с текстом по изображению. Для этого нам надо создать div’ный блок и установить ему фон с нужным нам изображением. А внутри блока написать нужный нам текст или другое изображение. Всё просто

Чу-Чу Чу-Чух Бегущая строка на сайте фотография по фотографии

<div style=»background:url(адрес изображения на фоне)»> <marquee>Чу-Чу Чу-Чух <img src=»адрес паровоза»></marquee>

В заключение

Как видите, всё очень просто. И абсолютно нет необходимости устанавливать какой-то плагин, тем самым дополнительно создавая нагрузку на страницу и сайт. Зачем, если можно это всё сделать одной строчкой кода?

Другое дело, если нужна более сложная анимация. Тут уже без плагинов и JavaScript кода не обойтись. Но если использовать на своем WordPress сайте плагин Elementor, то изучать код не обязательно. Там можно создавать анимацию для каждого элемента отдельно. Полный обзор этого мегаполезного плагина будет позже

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

Add a Comment

Your email address will not be published. Required fields are marked*

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.