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

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


В этом пример мы разберем, как сделать число анимированным без  плагинов.
Сделаем анимацию числа, которое увеличивается до нужного нам предела и с заданной скоростью.
Для начала создадим контейнер
  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
Загрузка

3013 просмотров
24.03.2017
Теги: jquery javascript



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

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

В статье вывел пример запуска.
Имя Цитировать 0
0
Александр
Добрый день! а как задать шаг в 0,5?
Имя Цитировать 0
 
Текст сообщения*
Защита от автоматических сообщений
 


Сервисы




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

04.Май.2019 Вывод ошибок в .settings.php
Если у вас на сайте произошла ошибка, но она не отображается...

05.Дек.2018 403 Forbidden в админке Bitrix

15.Июн.2018 Пагинация REL PREV NEXT 1С-Битрикс
Что бы облегчить поисковикам работу можно указать в теге hea...

07.Июн.2018 Как выровнять блок по центру экрана
Что бы выровнять блок по горизонтали, достаточно прописать с...

07.Июн.2018 Билайн продолжает списывать деньги при минусе
Это продолжение предыдущей статьи.
В прошлый раз я пис...

30.Май.2018 Новая версия 1С-Битрикс 18
Вышла новая версия 1С-Битрикс: Управление сайтом версии 18.0...

22.Май.2018 Настройка ЧПУ в 1С-Битрикс
Самый главный файл в 1С-Битрикс для настройки ЧПУ это urlrew...

22.Май.2018 Форматирования BB кода в 1С-Битрикс
Часто возникает ситуация, когда надо отформатировать текст, ...

21.Дек.2017 Не работает init.php
Если вы вносите правки в системный файл Битрикс init.php и н...

06.Июн.2017 Не выводятся деньги с QIWI на карту Сбербанка
При выводе средств из кашелька КИВИ (Visa QIWI Wallet...