bfintal / counter-up2 Goto Github PK
View Code? Open in Web Editor NEWCounter-Up is a lightweight module that counts up to a targeted number when the number becomes visible.
License: MIT License
Counter-Up is a lightweight module that counts up to a targeted number when the number becomes visible.
License: MIT License
Is this available on a CDN?
I did find this: https://www.jsdelivr.com/package/npm/counterup2
However, one can't use the SRI on the [email protected]/dist/index.min.js
file.
I'm importing with import counterUp from 'counterup2'
but I keep getting counterUp is not defined
. I'm using codekit, following the example. Anyone having similar issue?
const el = document.querySelector( '.counter__num' )
// Start counting, do this on DOM ready or with Waypoints.
counterUp( el, {
duration: 1000,
delay: 16,
} )
Edit: I was misunderstanding how es6 modules work.
I want to set a start number and end number.
Example:
<div id="number">10000</div>
counterUp(document.getElementById('number'), {
start: 2000, // start number
duration: 1000,
delay: 16,
});
any example running on expressjs
If I wanted to have a counter for a decimal value that is less than one, the resulting animation does not show the correct numbers. I have set up an example here: https://codepen.io/EndOfFile/pen/vYppEvY
I would expect that I would see decimal numbers during counting up, not whole numbers.
How can I configure the thousand / decimal separator? I need to display this number 1.000.000 (one million) and here in Brazil we use dots "." instead of commas "," as a thousand separator, while the decimal separator is a comma.
On assuming that delay
option means the initial time taken to start the counter, I changed it to 0 (not wanting any delay) after which the page started crashing every time the counter element came into view.
Realized that it was happening because the code does a division by delay here, meaning a division by 0 would cause a memory leak.
Ideally, the code should check and auto-assign the delay
to a minimum of 1. And also, perhaps more clear instructions about the delay
option in the readme would be helpful.
Thanks for creating this library.
This plugin is awesome, but I don't use the counter in multiple times.
Hi,
Is it possible to use a point instead of a comma? When counting to the number 12.000, a decimal point is used from 1000 (for example 1,012 instead of 1.012).
Initially (before starting the animation), I can see the destination (final) number, then it starts from 0 and then goes to the final number. Is there any way we can see 0 at first, then it goes up?
Hello,
I was using Counter-up in my site, I just updated jQuery version in the site to 3.3.1. Can you please in a demo where a user who is using jQuery can use this. too. Something similar to https://github.com/bfintal/Counter-Up/blob/master/demo/demo.html
Hi,
I got Cannot set property 'visibility' of undefined
issue when implementing counterup2 in text elements. Does anyone has the same issue and able to fix it?
I have three numbers next to each other I want to count up, but only the first one is counting. I tested this with adding an fourth one on top and only that one was counted.
How can I archive that all numbers with the "counter" class get counted up?
I was using the previevs version "counterUp" and all numbers where counted but, but I had an issue that the final numbers change after scrolling, that is why I switched to "counterUp 2.
How to use it simple or with jquery ?
counterUp( document.querySelector('.counter_number1'), { duration: 1000, delay: 16 } );
I have this error: Uncaught TypeError: counterUp is not a function
I use it with jquery and bootstrap 4 libs.
I setup the Counter-Up2 and came across a problem, when using decimal values.
Using the Codepen example https://codepen.io/bfintal/pen/zYzOGpZ and replacing the value 1,123,456.78 in the HTML with a decimal value "1.234" the counter starts counting up from 1 to 1000, as it interprets the number not as "1.234" but as "1234" (one thousand two hundred thirty four). The same when I exchange the dot with a semicolon.
Am I missing out on something? It said it can handle decimals.
Thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.