Hi guys,
I'd like to know how to create animated number?
The animated number will work while visitor scroll to the section.
I found some js on internet, however I don't know how to modify it?
Thank you in advance!
For example:
HTML:
<span class="count">853</span>
JS:
$('.count').each(function() {
$(this).prop('Counter', 0).animate({
Counter: $(this).text()
}, {
duration: 8000,
easing: 'swing',
step: function(now) {
$(this).text(Math.ceil(now));
}
});
});
Total novice here, but when I tried Shan's suggestion for how to get the counter to work for two elements, it fails.
This works for one text box:
}); let startNum = 0; let endNum = 70; const duration = 50; // 1000 milliseconds $w.onReady(function () { setInterval(()=> { countUp(); }, duration); }); function countUp(){ if (startNum <= endNum ){ $w('#text150').text = startNum.toLocaleString().toString(); startNum++; } }
But this doesn't work for either:
}); let startNum = 0; let endNum = 70; const duration = 50; // 1000 milliseconds $w.onReady(function () { setInterval(()=> { countUp(); }, duration); }); function countUp(){ if (startNum <= endNum ){ $w('#text150').text = startNum.toLocaleString().toString(); startNum++; } } let startNum1 = 0; let endNum1 = 70; const duration1 = 50; // 1000 milliseconds $w.onReady(function () { setInterval(()=> { countUp1(); }, duration1); }); function countUp1(){ if (startNum1 <= endNum1 ){ $w('#text154').text = startNum1.toLocaleString().toString(); startNum1++; } }
Any ideas? Thanks!
https://www.wix.com/corvid/forum/main/comment/5deef87abfc5bb0017917d05
Hi folks I found a super simple way, without coding, to do this. I created a GIF in photoshop with the countdown numbers I wanted. I used a transparent background. In wix you can upload the GIF like any other image, and when you place that GIF image it works. Super simple and no coding needed.
hello ing.
congratulations for your guide!! you are the best! i have two question for you.
For your opinion, exist one way, whit your code, to see same application from the mobile?
I have follow your guide, but is possible to erase the "comma"(o point) from the application?
thank you so much.
good woork.
The code works great for counting - but I do have a question when trying to count to larger numbers (80,000,000) from zero. It takes FOREVER! I tried changing the duration, but apparently I don't know exactly how to get it to count to 80 million in just a few seconds (5).
ANY HELP PLEASE?
Hey guys, How would I install this js code into wix?
Hi Tal,
have you looked at this solution?
This was very helpful.
However, the count up animation starts as soon as the page is loaded, and my text element has been placed in the center of the webpage, so by the time I scroll there, the count is already over.
I've tried creating an onViewportEnter event from properties panel and then inserting the count up code below it, so that the animation only begins when the element enters the viewport. But this doesn't work.
Does anyone have an example code for this?
Thanks so much!
hey tal thanks alot you helped me a lot
Tal, lets see this example:
I would like to create landing page informing any visitor of the webpage, how many EMPLOYEES (the endNum - which is dynamic, will be automatically counted up by the wix-code) and how many FACTORIES (here too, the endNum - which is dynamic, will be automatically counted up by the wix-code), the company manages.
So i would like write the Code, which makes it automatically for me using given parameters.
Thank you very much, Tal, for your assistance and effort.
Hi Vladimir,
I'm not sure that I understand what you were referring. Is it the same use-case like the current post? Can you please clarify?
Thanks
Hi Everyone,
when I read the articles above, this is something i was looking for, but let me be more specific: Let's assume, I use two different database collections: EMPLOYEES : 725 items FACTORIES: 45 items
how would the code look like in this case? Thanks
Hi Dor,
I've fixed my code above. I used the toLocaleString function instead which solved the issue. I've made the changes in bold so that you can see the difference. Note that you can change the duration variable to a higher number to have a smoother view of the counter.
Best,
Tal.
hello tal thanks for your respond the number display like this:
143,60,000
send link:
https://www.boostforward.biz/grant
and the way that the number run isn't Classic and smooth.
How does it display it now? Basically, the if statement should take care of this scenario (the modulo operation).
hello, how can i fix the comma for the number '14,360,000' in this example to show correctly?:
let startNum = 14359888; let endNum = 14360000; const duration = 7; // 1000 milliseconds $w.onReady(function () { setInterval(()=> { countUp(); }, duration); }); function countUp(){ if (startNum <= endNum ){ $w('#text4').text = addCommasToStringOfNumber(startNum.toString()); startNum++; } } function addCommasToStringOfNumber(numString){ let newNumString = numString.split("").reverse(); for (let i = 0; i < numString.length; i++){ if (i % 3 === 0 && i !== 0 ){ newNumString.splice( i, 0 , ","); } } newNumString = newNumString.reverse().join(""); return newNumString; }
thanks guys
Thx for this got it working on my site. After the counter has finished playing is it possible to replay animation on a continual loop after a delay of 3 seconds?
Hi David Rosenblatt,
To add several counters to a single page just add a numeric value like below
let startNum = 0; let endNum = 67; const duration = 110; $w.onReady(function () { setInterval(()=> { countUp(); }, duration); }); function countUp(){ if (startNum <= endNum ){ $w('#text106').text = startNum.toString(); startNum++; } } let startNum1 = 0; let endNum1 = 36; const duration1 = 200; $w.onReady(function () { setInterval(()=> { countUp1(); }, duration1); }); function countUp1(){ if (startNum1 <= endNum1 ){ $w('#text109').text = startNum1.toString(); startNum1++; } }
Best of Luck,
Shan
Thank you! Tal. Thank you! I have been looking for this code for a while now. Finally!.
now how do I add several counters to a single page?
Look guys I did it to this way
https://youtu.be/7ddghKQHgyw
you can download de code from mi page