Анимация html бегущая строка

Бегущая строка с помощью CSS Animations

Иногда возникает задача сделать на сайте бегущую строку. В свое время для этого существовал специальный тег marquee, однако официально он не был включен ни в одну из спецификаций HTML, поэтому пользоваться им нежелательно. Второй вариант — это сделать прокрутку средствами JavaScript, задав бегущей строке padding-left (или просто left, если контейнеру с ней выставлено свойство absolute) и регулярно уменьшая его с помощью setInterval. Главный недостаток этого варианта — большая нагрузка на процессор, кроме того, прокрутка получается не плавной, а рывками.
Но для современных броузеров есть еще один вариант, основанный на CSS animations. В отличие от варианта с JavaScript, он позволяет сделать прокрутку достаточно плавной и при этом дает больше возможностей. Самый простой вариант его реализации выглядит так.
Берем элемент, который нужно сделать бегущей строкой, и его содержимое обертываем в дополнительный span:

Далее в CSS прописываем следующие правила:
.marquee .marquee span < display:inline-block;width:100%;text-indent:0;animation: marquee 10s linear infinite>.marquee span:hover @keyframes marquee < 0% < transform: translate(100%, 0); >100% < transform: translate(-100%, 0); >> @media only screen and (max-width: 440px) < .marquee span>
Вот и все, у нас появилась бегущая строка без единой строчки JavaScript! Причем при наведении на нее курсора мыши она будет останавливаться (за это отвечает строка с .marquee span:hover, при необходимости ее можно убрать). Блок, начинающийся с @media, нужен для отключения строки на мобильных устройствах: на них она может ощутимо замедлить работу сайта.
Поменять скорость бегущей строки или ограничить количество ее прохождений по экрану можно в свойстве animation: marquee 10s linear infinite. 10s — это длительность анимации в секундах (то есть, чтобы замедлить строку в два раза, нужно указать вдвое большее время — 20s), infinite — бесконечное количество повторов. linear означает, что скорость движения строки постоянна. Можно поэкспериментировать, поставив другие значения: ease, ease-in, ease-out, или даже задать кривую Безье с произвольными параметрами с помощью cubic-bezier(x1, y1, x2, y2). Вместо infinite можно указать целое число, которое определит, сколько раз строка пробежит по экрану. Если требуется сделать, чтобы строка выбегала и останавливалась, не уходя за экран, то вместо translate(-100%, 0) нужно написать translate(0, 0);

4 комментария:

Если просто задать определённый цвет, то добавить color: #цвет в первую строку перед >
Если сделать меняющимся, то прописать color вот в эти две строки:
0% < transform: translate(100%, 0); color: #цвет1 >
100% < transform: translate(-100%, 0); color: #цвет2 >

Здравствуйте! Можно ли использовать изображения в качестве элементов бегущей строки? Можно ли сделать непрерывную ленту, без пустых мест после изображений?

Первый вопрос — да, можно. Это же обычный самый div, туда можно даже видео запихнуть (только не нужно — будет сильно процессор грузить).
С непрерывной лентой — сложнее, придётся экспериментировать. Так сходу придумывается вариант вставить все изображения по два раза (то есть после последнего идёт снова первое, потом — второе и т.д.), и в translate прописать -50% соответственно (остальные значения оставить как есть). Но без эксперимента не могу сказать, сработает или нет.

• © 2018—2023, 4X_Pro
• Правила
• Обо мне
• Все проекты
• Достижения

Здесь можно задать мне вопрос или спросить совета по любой теме, затронутой в блогах или на форуме. После того, как я отвечу, вопрос и ответ появятся в соответствующем разделе. Но не забываем, что я — сторонник slow life, поэтому каких-либо сроков ответов не обещаю. Самые интересные вопросы станут основой для новых тем на форуме или записей в блоге.
Сразу предупреждаю: глупости, провокации, троллинг и тому подобное летит прямо в /dev/null.

Источник

Бегущая строка на сайте с 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, но мы можем спокойно заменить его на

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

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

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

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

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

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

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

 <marquee><img alt="Бегущая строка на сайте с WordPress без плагинов" decoding="async" svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://andrewrochev.ru/ticker/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F" /></marquee>  

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

 <marquee><img alt="Бегущая строка на сайте с WordPress без плагинов" decoding="async" svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://andrewrochev.ru/ticker/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F%201" /><img alt="Бегущая строка на сайте с WordPress без плагинов" decoding="async" svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://andrewrochev.ru/ticker/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F%202" /> <img alt="Бегущая строка на сайте с WordPress без плагинов" decoding="async" svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://andrewrochev.ru/ticker/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F%203" /></marquee>  

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

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

Чу-Чу Чу-Чух

 <div style="" data-bg="url(адрес изображения на фоне)"><marquee>Чу-Чу Чу-Чух <img alt="Бегущая строка на сайте с WordPress без плагинов" decoding="async" svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201%201'%3E%3C/svg%3E" data-src="https://andrewrochev.ru/ticker/%D0%B0%D0%B4%D1%80%D0%B5%D1%81%20%D0%BF%D0%B0%D1%80%D0%BE%D0%B2%D0%BE%D0%B7%D0%B0" /></marquee></div>  

В заключение

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

Источник

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

Недавно ко мне обратились с просьбой организовать на сайте бегущую строку. Суть задачи была в том, что человек хотел обновить имеющуюся строку, которая была организована с помощью устаревшего HTML тега . Было принято решение сделать все с помощью обычного CSS.

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

Браузеры еще поддерживают его, но как долго marquee будет обрабатываться? Вот поэтому, чтобы не рисковать, стоит от него отказаться и если бегущая строка вам все же необходима, то можно сделать ее с помощью CSS. Получится в итоге такое:

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

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

.marquee < width:100%; white-space:nowrap; overflow:hidden; >.marquee span < color:#212121; font-size:25px; display:inline-block; padding-left:100%; -webkit-animation: marquee 10s infinite linear; animation: marquee 10s infinite linear; >@-webkit-keyframes marquee < 0%100% > @keyframes marquee < 0%100% >

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

• width:100%; — Задаем ширину нашему родительскому блоку marquee.
• white-space:nowrap; — запрещаем перенос слов на другую строку.
• overflow:hidden; — обрезаем все что выходит за наш блок с бегущей строкой, чтобы не было казусов.

Далее стили для span:

• display:inline-block; — делаем наш span строчно-блочным элементом
• padding-left:100%; — делаем отступ слева на всю ширину родительского блока.
• -webkit-animation и animation — применяем анимацию к блоку. Время выполнения анимации 10 секунд. Можете менять значение на свое.
• @-webkit-keyframes marquee и @keyframes marquee — сама анимация.

Это что касается основных параметров. Как и сказал выше, остальные стили можете добавлять какие угодно.

Все же многие считают бегущую строку устаревшим элементом. Ведь с развитием HTML и CSS, открылись новые возможности и сделать какую-то анимацию на сайте стало намного проще. Бегущая строка попросту устарела. Но тем не менее, многие продолжают ее использовать и как показывает практика, часто в тренды возвращается то что было когда-то.

На этом все, спасибо за внимание. 🙂

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

Источник