Как создать, отформатировать текст, изменить направление движения, скорость, а также заставить двигаться изображение или по изображению
Иногда для привлечения внимания к какому-то элементу на сайте, возникает желание создать для него анимацию. Как по мне, самой простой анимацией является так называемая бегущая строка на сайте. И сегодня я покажу, как её создать за 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, но мы можем спокойно заменить его на
<marquee direction="right" style="color:green;font-size:40px;padding: 20px;background: beige;border: 1px solid red;">Слева направо</marquee>
<marquee direction="up" style="color:green;font-size:40px;padding: 20px;background: beige;border: 1px solid red;height:100px;">Снизу вверх</marquee>
<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 пикселей (моя ширина экрана)
<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 без плагинов" 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>
Также можно разместить любое количество изображение подряд
<marquee><img class="lazy" alt="Бегущая строка на сайте с Wordpress без плагинов" 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 без плагинов" 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 без плагинов" 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 без плагинов" 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, то изучать код не обязательно. Там можно создавать анимацию для каждого элемента отдельно. Полный обзор этого мегаполезного плагина будет позже
Класс
Спасибо, работает!