До недавнього часу, рухомий рядок в HTML створювався за допомогою всього-на-всього одного тега – marquee. Але на даний момент браузери поступово припиняють його підтримку. Тому я не рекомендую використовувати <marquee> для реалізації рухомого рядка на сайті.
Нескінченний рухомий рядок CSS
За допомогою CSS можна досить швидко створити нескінченний рухомий рядок з можливістю зміни швидкості його пересування, а також з можливістю зупинити анімацію при наведенні курсору миші на рядок.
Приклад коду
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Рухомий рядок</title>
<style>
.moving-line {
width: 600px; /*ширина блока з рухомим рядком*/
margin: 0 auto; /*вирівнюємо елемент по центру*/
white-space: nowrap; /*відображення пробілів без переносу рядків*/
overflow: hidden; /*відображаємо рухомий рядок тільки в заданій області*/
background-color: #63c8ff; /*колір тіла елемента*/
}
.moving-line p {
padding-left: 100%; /*встановлюємо початкову позицію текста за межами блоку з правої сторони*/
animation: moving-line 25s linear infinite; /*25s - швидкість анімації, infinite - нескінчена анімація*/
}
.moving-line p:hover {
animation-play-state: paused; /*зупиняємо рухомий рядок при наведенні на нього курсора миші*/
}
@keyframes moving-line {
0% { transform: translate(0, 0); } /*початок переміщення*/
100% { transform: translate(-100%, 0); } /*переміщення вздовж осі X*/
}
</style>
</head>
<body>
<div class="moving-line">
<p>Текст рухомого рядка</p>
</div>
</body>
</html>
Пригостити автора кавою