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

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


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

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



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

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

В статье вывел пример запуска.
Имя Цитировать 0
0
Александр
Добрый день! а как задать шаг в 0,5?
Имя Цитировать 0
0
вася
У меня есть скрипт,как сделать что б при обновлении страницы анимация  не сбрасывалась ,а продолжала работать
<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
 
Текст сообщения*
Защита от автоматических сообщений
 


Сервисы




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

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

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

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

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

24.Окт.2019 Безлимитный интернет от Билайн не безлимитный
Как-то мне пришла смс от Билайна, что мне доступна услуга бе...

24.Окт.2019 Как мне помог сервис kwork.ru
Хочу поделиться своей истории о том, как я начал зарабатыват...

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

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

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

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