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

Обложка статьи "Как создать бегущую строку на wordpress сайте"
Оглавление статьи

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

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

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

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

HTML код бегущей строки

Эта бегущая строка на сайте движется благодаря такому коду:

				
					<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 class="lazy" alt="Бегущая строка на сайте с Wordpress без плагинов" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="адрес изображения" /></marquee>
				
			
Также можно разместить любое количество изображение подряд
Бегущая строка на сайте с Wordpress без плагиновБегущая строка на сайте с Wordpress без плагиновБегущая строка на сайте с Wordpress без плагинов
				
					<marquee><img class="lazy" alt="Бегущая строка на сайте с Wordpress без плагинов" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="адрес изображения 1" /><img class="lazy" alt="Бегущая строка на сайте с Wordpress без плагинов" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="адрес изображения 2" /><img class="lazy" alt="Бегущая строка на сайте с Wordpress без плагинов" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="адрес изображения 3" /> </marquee>
				
			

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

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

Чу-Чу Чу-Чух Бегущая строка на сайте фотография по фотографии
				
					<div class="lazy" style="" data-bg="url(адрес изображения на фоне)"><marquee>Чу-Чу Чу-Чух <img class="lazy" alt="Бегущая строка на сайте с Wordpress без плагинов" decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="адрес паровоза" /></marquee></div>
				
			

В заключение

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

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

4.8 23 голоса
Оцените эту статью

Расскажите о статье своим друзьям

Facebook
ВКонтакте
Twitter
Telegram
Одноклассники
Email
Эту и остальные статьи на сайте для Вас подготовил
Копирайтер Андрей Рочев
Андрей Рочев

АйТишник с навыками гуманитария. Пишу, а также снимаю видео, о том, как создать сайт без навыков программирования используя CMS Wordpress и плагин конструктора страниц Elementor.

Женат. Папа маленькой принцессы. Болею за ФК «Спартак» Москва, а также сопереживаю командам Юргена Клоппа и Жозе Моуриньо (не из-за стиля, а из-за его харизмы). Всё еще люблю смотреть КВН.

Подписаться
Уведомление о
guest

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

3 Комментарии
старее
новее большинство голосов
Inline Feedbacks
Посмотреть все комментарии
Ольга
Ольга
2 лет назад

Класс

Роман
Роман
2 лет назад

Спасибо, работает!

В.Ю.
В.Ю.
9 месяцев назад

Что значит работает? — Вообще НИЧЕГО НЕ РАБОТЕТ!

3
0
Появились мысли по статье? Напишите их в комментариях, пока не забылиx

Этот сайт, как и любой другой, создает на Вашем компьютере или телефоне cookie - файлы, чтобы улучшить Ваше нахождение на нем. Это безопасно и конфиденциально.

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