Анимация - увеличение числа на JS
Сегодня поговорим о том, как сделать анимацию чисел на сайте - полезный эффект увеличения чисел, который часто можно увидеть на лендингах. Данный эффект очень просто можно реализовать на JavaScript.
<div id="out" class="out-num">0</div>
- time - общее время отработки анимации числа и присвоим ей значение 10000 миллисекунд.
- step - шаг с которым будет увеличиваться число, присвоим значение 1
const time = 10000;
const step = 1;
Передадим в функцию два параметра. Первым параметром передадим само число, которое будет выводится на сайте. Вторым параметром передадим элемент, внутри которого это число будет выводиться.
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);
};
Первым параметром мы передаем целевое число, на котором анимация закончится. Вторым параметром - элемент, где выводить число на странице сайта. Скорость анимации числа напрямую зависит от шага и времени отводимого для полного цикла. Увеличив время, можно замедлить скорость смены чисел. Значения переменных time, step и передаваемое число в первом параметре функции, можно менять под ваши задачи.
outNum(100, '#out');
.out-num {
font-family: Impact, sans-serif;
font-size: 70px;
font-weight: 900;
margin: 30px;
}
Мы видим, как за 10 секунд произошло увеличение числа на единицу с 0 до 100.
Если вам интересно изучать JavaScript, то переходите на мой видеокурс по JavaScript и осваивайте очень востребованную профессию фронтенд-разработчика.
-
Создано 14.12.2020 10:23:14
-
Михаил Русаков
Комментарии (2):
Доброго времени. Впервые нахожусь на данном сайте, нашёл здесь много полезной информации. Созрела пара вопросов: 1) Насколько актуальная информация опубликована в целом? 2) Оформление сайта кажется устаревшим, что насчёт редизайна? (Кажется, что ресурс устарел, это отпугивает)
Ответить
elem не передается в функцию. let e = document.querySelector(elem)
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.