Как сделать анимацию числа на сайте?

Question

[Сергей]

Нужно сделать анимацию числа. К примеру: 9 - плавное изменение от 0 до 9. Пробовал шорткодом, анимация заканчивается до того как мы опускаемся до цифр(контент внизу страницы). На просторах интернета находил много скриптов, но не могу поставить. Стабильно получаю Uncaught TypeError: undefined is not a function.
- Подскажите какой-нить плагин для вордпресса для этих целей(желательно бесплатный);
- Подскажите из-за чего ошибку получаю( пациент - 433883.bbukva.web.hosting-test.net).

Answer 1

[Андрей Б.]

А в jquery кто оборачивать будет?

jQuery(document).ready(function($){
$('#ten')
  .prop('number', 10)
  .animateNumber(
    {
      number: 100
    },
    20000
  );
});

Comments

[Сергей]

Благодарю за решение ошибки! А не знаете как запускать активацию скрипта, в момент пролистывания самих цифр(когда экран активен в месте их дислокации). А то выходит, что если задержишься вверху, то вся анимация заканчивается:)

[Андрей Б.]

вешайте выполнение скрипта на scrollTop

[Сергей]

Да. Наверное придется как-то через скролл. Несложно еще вот это оценить ->
jQuery(document).ready(function($){
$('.statistik').viewportChecker({
callbackFunction: function(elem, action){
$('.lines1').animateNumber({ number: 9 }, 6000);
$('.lines2').animateNumber({ number: 80 }, 6000);
$('.lines3').animateNumber({ number: 150 }, 6000);
$('.lines4').animateNumber({ number: 20 }, 6000);
$('.lines5').animateNumber({ number: 52 }, 6000);
$('.lines6').animateNumber({ number: 200 }, 6000);
},
});
});

[Сергей]

Для счетчика надо: https://github.com/aishek/jquery-animateNumber
Для активации в нужном месте нужна эта фича: https://github.com/dirkgroenen/jQuery-viewport-checker
Всем спасибо!

Answer 2

[Antony]

habrahabr.ru/post/236455

Comments

[Сергей]

Вопрос, как мне реализовать мою задачу на часах? За плавное изменение +, но поняли буквально))

[Antony]

zeyser: А причем тут часы? Часы просто пример + ссылка JS скрипты для рисования циферок.

Answer 3

[Николай Ерофеев]

обычный счетчик + scrolltop

Answer 4

[Александр Миранович]

jsfiddle.net/f48ZD/183

Answer 5

[Aginvlad]

https://t.me/feenproject/16