Анимированное увеличение чисел | Для разработчиков | Сайты для бизнеса

Анимированное увеличение чисел


В этом пример мы разберем, как сделать число анимированным без  плагинов.
Сделаем анимацию числа, которое увеличивается до нужного нам предела и с заданной скоростью.
Для начала создадим контейнер
  1. <div id="num"></div>
И в принципе больше в HTML разметке нам ничего не нужно.
Напишем сразу скрипт:
  1. $('#num').animate({ num: 90 - 3/* - начало */ }, {
  2.     duration: 5000,
  3.     step: function (num){
  4.         this.innerHTML = (num + 3).toFixed(2) + '%'
  5.     }
  6. });

Запускаем скрипт и наше число увеличивается до 90, именно такое предел мы задали в скрипте. Кстати, заметьте мы не только можем указывать предел, но еще и скорость анимации в свойстве duration, в котором указанно 5 секунд.

Более сложный пример с тысячными:
  1. $.Tween.propHooks.number = {
  2.     get: function ( tween ){
  3.         var num = tween.elem.innerHTML.replace(/^[^\d-]+/, '');
  4.         return  parseFloat(num) || 0;
  5.     },
  6.  
  7.     set: function( tween ) {
  8.         var opts = tween.options;
  9.         tween.elem.innerHTML = (opts.prefix || '')
  10.         + tween.now.toFixed(opts.fixed || 0)
  11.         + (opts.postfix || '');
  12.     }
  13. };
  14.  
  15. $('#num2')
  16. .delay(2000)
  17. .animate({ number: 95 }, {
  18.     duration: 5000,
  19.     prefix: '~',
  20.     postfix: '%',
  21.     fixed: 3
  22. });

Еще один пример для наглядности, где мы задаем минимальные и максимальные значения:
  1. <p id="dynamic-number">35</p>
  2.  
  3. var currentNumber = $('#dynamic-number').text();
  4.  
  5. $({numberValue: currentNumber}).animate({numberValue: 100}, {
  6.     duration: 1000,
  7.     easing: 'linear',
  8.     step: function() { 
  9.         $('#dynamic-number').text(Math.ceil(this.numberValue)); 
  10.     }
  11. });
Значение, с которого мы начинаем отсчет приписывается в контейнере HTML, поскольку оно может вставляться туда динамически через какой-нибудь php скрипт, а JS код будет его уже увеличивать в браузере клиента.

Ну и напоследок еще один пример, в котором нижний и верхний предел задаются непосредственно в javascript коде:
  1. var output = $('span'),
  2. start = 0,
  3. end = 80,
  4. timer = setInterval(function () {
  5. 	output.text(start++ + '%');
  6. 	if (start > end) {
  7. 		clearInterval(timer);
  8. 	}
  9. }, 50);
Можно еще улучшить скрипт, например запускать функцию увеличение числа при прокрутки страницы вниз, когда блок, в котором увеличивается число, находиться в видимой части страницы, если кого интересует такая доработка пишите в комментариях.

Пример запуска при прокрутке 0
Загрузка

9202 просмотра
24.03.2017
Теги: javascript jquery



комментариев:
Оставить комментарий
0
Guest 23.09.2017
Вот бы интересно было если бы разработали такой скрипт который запускается при прокрутке. Заранее благодарен
Цитата
Ответ администратора:
Код анимации нужно положить в функцию и вызывать его в событие document.onscroll. В функции должна быть проверка на координаты элемента.
Получиться примерно такое условие:

Код
if ($(document).scrollTop() + $(window).height() > $('#num').offset().top && $(document).scrollTop() - $('#num').offset().top < $('#num').height()

В статье вывел пример запуска.
Имя Цитировать 0
0
Александр 13.05.2019
Добрый день! а как задать шаг в 0,5?
Имя Цитировать 0
0
вася 22.10.2019
У меня есть скрипт,как сделать что б при обновлении страницы анимация  не сбрасывалась ,а продолжала работать
<sc ript type="text/javascript">
var currentNumber = $('#dynamic-number').text();
var paraminingday = '189.84424';
var paraminingsutki = '333.62488454444';
$({numberValue: currentNumber}).animate({numberValue: paraminingsutki}, {
   duration: 86400000,
   easing: 'linear',
   step: function() {
   var n = parseFloat(this.numberValue);
 $('#dynamic-number').text(n.toFixed(5));
   }
});
</sc ript>
Имя Цитировать 0
 
Текст сообщения*
Защита от автоматических сообщений
 

Не работает Java в браузере
Билайн списывает деньги, даже когда телефон заблокирован
Статьи


Сервисы

Найти среднюю оценку

Прибавить или вычесть процент

Калькулятор процентов

Калькулятор соотношения сторон пропорции ширины и высоты

Калькулятор стоимости кафеля (плитки)

Калькулятор стоимости длины

Калькулятор цен по весу

Калькулятор сравнения (разницы) цен

Калькулятор стоимости товара

Тетрис на Двоих

Проверка домена (whois)




Последние публикации

24.окт.2021 Битрикс Работа с сокетами Ошибка! Не работает
В проверке сайте можно наблюдать такую ошибку
Работа ...

17.июл.2021 Как передать Roistat в заказ 1С-Битрикс
Передать ID Roistat можно в сам заказ в Битриксе после его о...

21.июн.2021 Сбой на файле, ошибка распаковки пакета
При очередном обновлении 1С-Битрикс выскочила ошибка [UUGZA0...

03.июн.2020 Не выводиться заглушка в композитном кеше
Столкнулся с тем, что при указании заглушки в динамической о...

01.апр.2020 Установка SSL сертификата LetsEncrypt на BitrixVM
Установка SSL сертификата LetsEncrypt на виртуальную машину ...

07.мар.2020 Битрикс настройка SSL, ошибка работы с сокетами
Заходим в меню битрикса выбираем 8. Manage pool web servers ...

14.ноя.2019 Не выгружаются заказы в 1С
Не выгружаться заказы в 1С из сайта на битрисе могут по разн...

07.ноя.2019 Видео youtube на фон сайта
Как-то на сайт мне нужно было вывести видео на весь экран, к...

05.ноя.2019 Свойство с большим списком (датой)
Если в инфоблоке необходимо использовать свойство типа списо...

05.ноя.2019 Основные настройки BitrixVM
Приведу основные пути и файлы конфигурации в виртуальной маш...