Бегущие цифры на JavaScript. Простой эффект для сайта

1 сентября 2021

Комментариев нет

Сегодня мы сделаем простой и красивый эффект, который позволяет эффектно выводить бегущие цифры на Вашем сайте. Пример того, что у нас получится, можно увидеть здесь: https://lenium.ru/_pr/chisla-beg/

Идёт прокрутка которую мы можем задать, если мы изменим время вывода, то соответственно увеличится скорость вывода. Мы можем изменять цифры и можем изменять шаг. Давайте попытаемся сделать такой эффект.

Для этого нам потребуется папка с 3-мя файлами: index.html, style.css, script.js

В HTML файле подключена строчка Google-шрифтов, хотя можно и без неё обойтись.
А также подключена строчка стилей, опять же для красоты, можно обойтись без неё.

В теле HTML файла главным является тег div с идентификатором out-1, а класс здесь просто для оформления.

index.html

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="style.css">
	<link href="https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap" rel="stylesheet">
	<title>Бегущие числа</title>
</head>
<body>
	<div id="out-1" class="out-num">0</div>

	<script src="script.js"></script>
</body>
</html>

Файл JS, здесь нам понадобиться 2 константы, на основании которых мы будем конфигурировать наш вывод, это Время (в миллисекундах) и Шаг. Ниже у нас находится функция, где в параметрах указаны число и элемент.

Сначала мы получим сам элемент по id. Само число считается от нуля (n = 0). Далее необходимо понять сколько шагов у нас от числа до результата за время. Пишем выражение, где Введённое число делим на Шаги, и затем уже Время делим на полученное.

В конце задаётся интервал с двумя параметрами, это Функция и Время (t).
Наращиваем наше число: n = n + step
Затем пропишем условие и выведем число.

script.js

const time = 5000; // ms
const step = 1; 

function outNum(num, elem) {
	let l = document.querySelector('#' + elem);
	n = 0;
	let t = Math.round(time/(num/step));
	let interval = setInterval(() => {
		n = n + step;
		if (n == num) {
			clearInterval(interval);
		}
		l.innerHTML = n;
	},
		t);
}

outNum(1000, 'out-1');

style.css

body {
    background: #95dafa;
}

.out-num {
    font-family: 'Kaushan Script', cursive;
    font-size: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}