Copy link to clipboard
Copied
Is there a simple, nice looking animated counter that I can paste into my webpage? I need 0 to scroll to 6000.
Thank you
Copy link to clipboard
Copied
hummm......do you want this counter to start on page load or when you scroll to a specific section of your page? Not sure what you mean by 'scroll to 6000' do you just mean count to 6000?
Copy link to clipboard
Copied
I'd like to show that a product has 6000 hours of use. If a user visited the site and then scrolled down the page, there would be a line of text and then a fast count to 6000.
Thanks for letting me know my question was not clear.
Copy link to clipboard
Copied
I'd like to show that a product has 6000 hours of use. If a user visited the site and then scrolled down the page, there would be a line of text and then a fast count to 6000.
Thanks for letting me know my question was not clear.
By sarahmitchell@live.com
Right. See code example below. Can you work with that?
I've inserted a grey spacer before the counter so the counter only starts when the counter comes into the browsers viewport, using the javascript intersection observer API. You can remove the grey spacer or replace it with your own content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Oxanium&display=swap" rel="stylesheet">
<title>Animated Counter</title>
<style>
body {
font-family: 'Oxanium', cursive;
margin: 0;
}
.counterWrapper {
padding: 40px 0;
}
.counterWrapper h3 {
margin: 0;
padding: 0;
text-align: center;
}
.counter {
text-align: center;
font-size: 45px;
color: #000;
border-radius: 5px;
margin: 0 auto;
}
.spacer {
height: 1700px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="spacer"></div>
<section class="counterWrapper">
<h3>Some text goes here</h3>
<div class="counter">0</div>
</section>
<script>
// Counter
const counter = document.querySelector('.counter');
let count = 0;
function counterInView() {
let startCount = setInterval(startCountFunc, 1);
function startCountFunc() {
counter.innerText = count;
if(count === 6000) {
clearInterval(startCount);
}
count++;
}
}
// Intersection Observer
if ( 'IntersectionObserver' in window ) {
let observer = new IntersectionObserver(function (entries, observer) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
counterInView();
observer.unobserve(entry.target);
}
});
}, { rootMargin: "0px 0px -8% 0px" } );
// Observe the elements to be animated
document.querySelectorAll( '.counter' ).forEach( function (el) {
observer.observe(el);
} );
}
</script>
</body>
</html>
Copy link to clipboard
Copied
Not sure what you mean either.
Maybe you want a range slider like this?
https://www.w3schools.com/howto/howto_js_rangeslider.asp
Or perhaps a countdown timer like this?
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_countdown
Does that help?
Copy link to clipboard
Copied
I'd like to use a counter that goes very quickly up to 6000. There will also be a line of text that describes that the product has 6000 hours of use. Here's an example: https://www.corafoodpantry.org/ just below "Over ..."
Copy link to clipboard
Copied
Switch to WordPress. You'll find plenty of older WP Themes that have them built-in. They are nothing new and most people are sick of seeing them.
https://themeforest.net/category/wordpress?term=animated%20counter
WordPress Plugin
https://wordpress.org/plugins/animated-number-counters/
Copy link to clipboard
Copied
Switch to WordPress. You'll find plenty of older WP Themes that have them built-in. They are nothing new and most people are sick of seeing them.
https://themeforest.net/category/wordpress?term=animated%20counter
WordPress Plugin
https://wordpress.org/plugins/animated-number-counters/
By @Nancy OShea
You don't need to do anything drastic like use Wordpress or use yet another bloated plugin every time something simple comes up. If you cant do it because youre not a developer (every developer should be able to do this with their eyes closed) then search Codepen, there's bound to be several options that will integrate with your existing code, rather than chucking the baby out with the bath water.
Copy link to clipboard
Copied
Did you look at the website? It's WordPress!
That's not tossing baby out with the bathwater if that's what the OP is using.
Copy link to clipboard
Copied
Did you look at the website? It's WordPress!
That's not tossing baby out with the bathwater if that's what the OP is using.
By @Nancy OShea
They never said they were using Wordpress, the website they provided a url to was an example of the effect they wanted and you don't need Wordpress or any other damn plugin to produce it either.
Copy link to clipboard
Copied
Did you look at the website? It's WordPress!
That's not tossing baby out with the bathwater if that's what the OP is using.
By @Nancy OShea
They never said they were using Wordpress, the website they provided a url to was an example of the effect they wanted and you don't need Wordpress or any other damn plugin to produce it either.
By @osgood_
In England and the United States, have you ever heard of Luky Luke ?
Copy link to clipboard
Copied
Lucky Luke is a cartoon cowboy. I think I read him in 2nd year French class along with The Little Prince. I don't remember much except that reading books was a nice break from conjugating irregular verbs. 😈
Copy link to clipboard
Copied
along with The Little Prince. I don't remember much except that reading books was a nice break from conjugating irregular verbs. 😈
By @Nancy OShea
It's almost a pity that reading The Little Prince only left you with a memory that gave you a nice break from conjugating irregular verbs.
Please do not read the English version of the wikipedia description, which really falls short of what this masterpiece translated into over 500 languages conveys.....https://fr.wikipedia.org/wiki/Le_Petit_Prince
Copy link to clipboard
Copied
Did you look at the website? It's WordPress!
That's not tossing baby out with the bathwater if that's what the OP is using.
By @Nancy OShea
They never said they were using Wordpress, the website they provided a url to was an example of the effect they wanted and you don't need Wordpress or any other damn plugin to produce it either.
By @osgood_
In England and the United States, have you ever heard of Luky Luke ?
By @B i r n o u
Never heard of the bloke, but a Google search throws up a character that seems to be intent on putting the wrong, right, through intelĺigent use of his own skills, which l can equate to. I dont have the horse as yet though, maybe thats a roll you can step into?
Copy link to clipboard
Copied
I included the link to show an example of the counter since I hadn't described it clearly. I do not use Wordpress.
Copy link to clipboard
Copied
I included the link to show an example of the counter since I hadn't described it clearly. I do not use Wordpress.
By sarahmitchell@live.com
See if you can integrate the example code in reply 3 in this thread.
Copy link to clipboard
Copied
100%. I know Wordpress has positives, I know its widely used but in no right mind will I ever justify a new site on this platform and I know you have not even started listing issues with it but I can tell you will be on the same page as me. I cringe any time someone suggests to switch to it. To suggest to switch for a small feature as well I do not agree with 😕
Copy link to clipboard
Copied
To suggest to switch for a small feature as well I do not agree with 😕
By @Liam Dilley
===========
The example site was WordPress. We had no way of knowing what the OP was using until later.
Personally, I think speed counters are passe. Not something I would spend much time on.
Just my two cents.
Copy link to clipboard
Copied
To suggest to switch for a small feature as well I do not agree with 😕
By @Liam Dilley===========
We had no way of knowing what the OP was using until later.
By @Nancy OShea
Unless youre Lucky Luke of course, he knows.
Copy link to clipboard
Copied
osgood_ is on the right lines of what you need and information to help you.
If your using jQuery it is really easy through Animate. You can pass your original value and use the Animate step functions to just iterate over the numbers to the main value.
The other aspect is to have it run when scrolled into view.
Again IF JQuery (Since I mentioned animate) you have things for view events like..
http://raychang.github.io/jquery-bullseye/
Quick example from me:
https://codepen.io/TheNexus_00/pen/GRxRRzr
Full example I found with jQuery:
https://codepen.io/Alpesh_Rajpurohit/pen/WzZKbZ
Pure Javascript example:
https://codepen.io/krisha23/pen/ZEYyMep
But has osgood_ has shown doing native JS is pretty straight forward as well.