Animated Number Counter in Wix | Beginner Tutorial
HTML-код
- Опубликовано: 21 июл 2024
- ⭐LINK TO CODE | bit.ly/403yPap
⭐PREVIEW WEBSITE | bit.ly/3z9atA1
⭐BUILD YOUR WEBSITE | www.wix.com/
Add an animated number counter in wix using velo by Wix. This tutorial covers the step-by-step tutorial on adding an animated number counter into your wix website using velo by Wix.
The four (4) part animation includes counting numbers that has:
1. Just a value
2. A prefix text and then a value
3. A value and then a suffix text
4. A prefix, a value, and a suffix text
This is so you can easily choose how you want your counter to be displayed to your site visitors. In Wix Ideas we provide tutorials that can make your Wix journey effortless, that's why this tutorial shows you a step-by-step on achieving an animated number counter.
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
🔥Top Videos for you 🔥
Quick View with Wix Lightbox: • Quick View with Wix Li...
Gradient Text in Wix: • Gradient Text in Wix |...
Custom Wix Social Share: • Custom Wix Social Shar...
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
⚡Chapters⚡
Overview 🎉00:00
Velo Code 🧑🏽💻1:27
Preview 12:12
Tip🎁 12:30
Thank you🙏🏽 13:36
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
⚠️DON'T FORGET TO;
❤SUBSCRIBE | bit.ly/3a07EEF
👍🏾LIKE
🔥SHARE
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
#wixideas #velobywix #wixwebsite #AnimatedNumberCounter #wixtutorial
⭐LINK TO CODE | bit.ly/403yPap
⭐PREVIEW WEBSITE | bit.ly/3z9atA1
Looked everywhere to no avail but your tutorial was the PERFECT solution! Thank you so much!
Glad it helped!
I am indebted to you for the rest of my life. Very well made. Thank you.
Much appreciated!
Excellent tutorial! Thank you so much!!
You're very welcome!
Thank you for this video! Extremely helpful!
Glad it was helpful!
Really good tutorial!
Glad it was helpful!
❤ Thanks for this tip.
Thanks for your comment Sunil!
Nice tutorial and it worked with the first set of numbers. However, when trying to update the numbers with this weeks stats, they do not show up correctly.
Hi there, thanks for your comment. Please try this code codefile.io/f/WO5azB2G8R
I used this code because the one in the video also didn’t worked for me. I did everything like u said in the link but when ever I go into preview mode there is no counting but the number in the text field just change to „NaN“
This is great! How can I make sure the counter only runs the first time it's viewed rather than every time?
Hi there, thanks for your comment. To do this, you might need to adjust the code a little bit. For one, you can use session storage to store a variable when the visitor enters the viewport www.wix.com/velo/reference/wix-storage-frontend/session
Then run a conditional check when the visitor enters the view port to see if there is a value in the session storage. If there is a value, the animation shouldn't run. If there is no value, the animation should run.
If you could share the code that would be much appreciated! @@wixideas
perfect! but how can I do it as 4.1% of 50.4%
Hello, does this only work for the "section" and not for the "strip"? cuz I followed every step and it didn't work 😖😿 (Thank you for your tutorial anyway!
Hi there, thanks for your comment! It works for all elements that has the onviewportenter property. That includes the Strip as well.
What if I wanted to show a year as 2023 instead of 2,023? How would I remove the comma from certain numbers but keep them on others?
Hello there, thanks for your comment. I mentioned this in the last part of the tutorial ruclips.net/video/S5CcZtXYYbQ/видео.html
Super useful but....! What happens when you have a multilingual website and you have to count for example "+40 years" in english but you want to show "+40 años" in spanish?
Thanks for your comment, Joaquín! That can easily be adjusted using this part of the code;
await countElement("#text4", 0, 40, "+", " años");
You can use the function template as a guide
function countElement(elementID, startValue, endValue, prefix = "", suffix = "")
Please let me know if this helps.
Thanks.. Can you please send the link to the code as the link is not working. thanks for the great tutorial
Here's the link www.wixideas.com/tutorial/title/animated-number-counter/id/0dea1b1e-f843-4dd1-9eb9-49ab85d66b1a
What if you don't want your numbers to round up and you need exact numbers?
Thanks for your comment. This has been solve. Attaching code for reference codefile.io/f/WGM0yWgxGs
What if you want it to calculate with the decimals? like from 0.0% up to 6.5%? Your solution will only end with the decimals, but not also include the decimals in the counting animation@@wixideas