Минулого разу, я розповідав вам, як створити рухомий рядок на сайті за допомогою CSS. А сьогодні, пропоную розглянути тему, як створити нескінчений рухомий рядок на Javascript.
Рухомий рядок на чистому JS
<!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-wrapper {
margin:0 auto; /*вирівнюємо елемент по центру*/
width: 600px; /*встановлюємо ширину елемента*/
font-size: 26px; /*задаємо розмір шрифта для тексу*/
overflow: hidden; /*відображаємо рухомий рядок тільки в заданій області*/
position: relative; /*встановлюємо відносне позиціювання елемента*/
border-radius: 4px; /*заокруглюємо краї меж елемента*/
box-shadow: 0 0 10px rgba(0,0,0,0.5); /*додаємо тінь*/
background-color: #63c8ff; /*встановлюємо колір тіла елемента*/
}
/*Після основного елемента виводимо наступний контент*/
.moving-line-wrapper:after {
position: absolute; /*встановлюємо абсолютне позиціювання елемента*/
content: ' '; /*новий вміст елемента*/
right: 0; /*встановлюємо відстань відступу від правого краю батьківського елемента до правого краю дочірнього елемента.*/
top: 0; /*встановлюємо відстань від верхнього краю батьківського елементу до верхнього краю дочірнього елемента*/
width: 100%; /*ширина елемента*/
height: 100%; /*висота елемента*/
background-image: linear-gradient(to right, #fff, transparent, #fff); /*застосовуємо для елемента лінійний градієнт*/
}
.moving-line {
padding-left: 100%; /*встановлюємо початкову позицію текста за межами блоку з правої сторони*/
white-space: nowrap; /*відображення пробілів без переносу рядків*/
}
</style>
</head>
<body>
<div class="moving-line-wrapper">
<p class="moving-line">Текст рухомого рядка</p>
</div>
<script>
let wrapper = document.querySelector('.moving-line-wrapper'),
movLine = document.querySelector('.moving-line'),
wrapperWidth = wrapper.offsetWidth,
movLineWidth = movLine.scrollWidth;
function move() {
let currentTX = getComputedStyle(movLine).transform.split(',');
if( currentTX[4] === undefined ) {
currentTX = -1;
} else {
currentTX = parseFloat(currentTX[4]) - 1;
}
if(-currentTX >= movLineWidth) {
movLine.style.transform = 'translateX(' + wrapperWidth + 'px)';
} else {
movLine.style.transform = 'translateX(' + currentTX + 'px)';
}
}
let interval = setInterval(move, 10); // швидкість рухомого рядка (чим нижче значення ти швидша анімація)
</script>
</body>
</html>
Пригостити автора кавою