Популярный дизайнерский прием при создании лендинга - использвание анимированного числа. К примеру, "за 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>