Популярный дизайнерский прием при создании лендинга - использвание анимированного числа. К примеру, "за 2018 год мы заключили N договоров" и там где N в течение пары секунд бегут цифры и привлекают внимание посетителя, указывая, насколько наша фирма крутая :)
Ниже приведен простой скрипт формирования подобного анимированного счетчика клиентов (договоров, денег, всего что угодно).
Как использовать?
Создайте пустую html-страничку и скопируйте в редактор приведенный ниже код. Все пояснения - в комментариях. Разберетесь сами по ходу дела :)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Бегущие числа</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<h1>Промотайте страницу вниз и увидите анимированное число!</h1>
<div style="margin-top: 100%;">
Столько человек сегодня установили на сайт скрипт с анимированным числом :)
<div id="number1" style="font-size: 80px; color: #0066cc;"></div>
</div>
</body>
<script>
var number = 0; // number - число, которое будем анимировать.
var flag1 = 0; // флаг срабатывания анимации, когда анимация отработала выставляется 1
var d1 = new Date(2013, 3, 15); // от этой даты идет отсчет дней. Формат - Y, m, d
var d2 = new Date(); // сегодняшний день
var timeDiff = Math.abs(d2.getTime() - d1.getTime());
var clients = Math.ceil(timeDiff / (1000 * 3600 * 24)); // вычисляем разницу в дате (вычисление приблизительное, поэтому округление. Не учитыается переход на зимнее время. Если есть желание - допилите этот момент сами.)
$(document).scroll(function(){ // обработка события скролла документа
var offset = $("#number1").offset().top;
var scroll = $(window).scrollTop() + $(window).height();
if (scroll >= offset && flag1 === 0 ) {animateNumber(clients); flag1 = 1;}
});
function animateNumber(number) { // функция анимации числа
var i = 0;
var timer = setInterval(function() {
i += 3; // шаг приращения числа. Чем больше, тем быстрее.
$("#number1").html(i);
if (i >= number) { clearInterval(timer);}
}, 10); // число 10 - задержка в миллисекундах между сменой чисел
}
</script>
</html>