Бегущая строка с помощью CSS Animations
Иногда возникает задача сделать на сайте бегущую строку. В свое время для этого существовал специальный тег marquee, однако официально он не был включен ни в одну из спецификаций HTML, поэтому пользоваться им нежелательно. Второй вариант — это сделать прокрутку средствами JavaScript, задав бегущей строке padding-left (или просто left, если контейнеру с ней выставлено свойство absolute) и регулярно уменьшая его с помощью setInterval. Главный недостаток этого варианта — большая нагрузка на процессор, кроме того, прокрутка получается не плавной, а рывками.
Но для современных броузеров есть еще один вариант, основанный на CSS animations. В отличие от варианта с JavaScript, он позволяет сделать прокрутку достаточно плавной и при этом дает больше возможностей. Самый простой вариант его реализации выглядит так.
Берем элемент, который нужно сделать бегущей строкой, и его содержимое обертываем в дополнительный span:
Далее в CSS прописываем следующие правила:
Вот и все, у нас появилась бегущая строка без единой строчки 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);
Но для современных броузеров есть еще один вариант, основанный на CSS animations. В отличие от варианта с JavaScript, он позволяет сделать прокрутку достаточно плавной и при этом дает больше возможностей. Самый простой вариант его реализации выглядит так.
Берем элемент, который нужно сделать бегущей строкой, и его содержимое обертываем в дополнительный span:
<div class="marquee"><span>Текст бегущей строки</span></div>Далее в CSS прописываем следующие правила:
.marquee{text-align:left;width:100%;overflow:hidden;white-space: nowrap;}
.marquee span { display:inline-block;width:100%;text-indent:0;animation: marquee 10s linear infinite}
.marquee span:hover{animation-play-state: paused}
@keyframes marquee {
0% { transform: translate(100%, 0); }
100% { transform: translate(-100%, 0); }
}
@media only screen and (max-width: 440px) {
.marquee span{animation:none;padding-left:0}
}
Вот и все, у нас появилась бегущая строка без единой строчки 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);
