Сегодня поговорим о том, как сделать анимацию чисел на сайте - полезный эффект увеличения чисел, который часто можно увидеть на лендингах. Данный эффект очень просто можно реализовать на JavaScript .

Анимация - увеличение числа на JS

Сегодня поговорим о том, как сделать анимацию чисел на сайте - полезный эффект увеличения чисел, который часто можно увидеть на лендингах. Данный эффект очень просто можно реализовать на JavaScript.

1) Создадим в HTML файле блок, где будет выводится данное число.

<div id="out" class="out-num">0</div>

2) Создадим две переменные:

  • time - общее время отработки анимации числа и присвоим ей значение 10000 миллисекунд.
  • step - шаг с которым будет увеличиваться число, присвоим значение 1

const time = 10000;
const step = 1;

3) Создадим функцию outName

Передадим в функцию два параметра. Первым параметром передадим само число, которое будет выводится на сайте. Вторым параметром передадим элемент, внутри которого это число будет выводиться.

function outNum(num, elem) {
    // тело функции
};

Поскольку наше число будет выводится внутри тега div, то получим элемент по идентификатору внутри функции. Введем новую переменную elem, в которую получим тег div с идентификатором out.

function outNum(num, elem) {
    let elem = document.querySelector('#out');
};

Раз отсчет числа будет начинаться от нуля, значит присвоим счетчику n значение 0. Также нужно определиться с количеством шагов от выводимого числа до результата, пока не пройдут 10000 мс. Заранее округляем полученное число в переменную t с помощью метода Math.round (нам не нужно дробное число) и прописываем математическое действие. Делим время на результат от деления числа на шаг и получаем нужное время в переменную t. Затем зададим интервал с двумя параметрами, первый интервал это функция, а второй параметр - время t.

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

Нам нужно наращивать наше число. Когда счетчик n достигнет определенного числа, то мы отменяем работу функции через clearInterval. Далее выводим само число в HTML-документе.

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

4) Запустим функцию outNum

Первым параметром мы передаем целевое число, на котором анимация закончится. Вторым параметром - элемент, где выводить число на странице сайта. Скорость анимации числа напрямую зависит от шага и времени отводимого для полного цикла. Увеличив время, можно замедлить скорость смены чисел. Значения переменных time, step и передаваемое число в первом параметре функции, можно менять под ваши задачи.

outNum(100, '#out');

5) Зададим CSS стили для красоты

.out-num {
    font-family: Impact, sans-serif;
    font-size: 70px;
    font-weight: 900;
    margin: 30px;
}

Мы видим, как за 10 секунд произошло увеличение числа на единицу с 0 до 100.

Демонстрация анимации

Если вам интересно изучать JavaScript, то переходите на мой видеокурс по JavaScript и осваивайте очень востребованную профессию фронтенд-разработчика.