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

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


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

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



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

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

В статье вывел пример запуска.
Имя Цитировать 0
 
Текст сообщения*
Защита от автоматических сообщений
 


Сервисы




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

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...

26.Май.2017 Как правильно составлять задание для программиста на кворке
Многие делая заказ на бирже фриланса (кворк, fl.ru, free...

16.Май.2017 Запускается хром с рекламным сайтом
Очень часто в последнее время на моем компьютере начал самоп...