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

Віталий

7 років ago

Доброго времени суток. 🙂

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

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

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

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

<div class="marquee"><span>Наш бегущий текст. Текст, который будет двигаться с права налево.</span></div>

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

.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%{-webkit-transform: translate(0, 0);}
100%{-webkit-transform: translate(-100%, 0);}
}
@keyframes marquee{
0%{transform: translate(0, 0);}
100%{transform: translate(-100%, 0)}
}

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

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, открылись новые возможности и сделать какую-то анимацию на сайте стало намного проще. Бегущая строка попросту устарела. Но тем не менее, многие продолжают ее использовать и как показывает практика, часто в тренды возвращается то что было когда-то.

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

Exit mobile version