Animated Counter

Community Beginner ,
Jun 27, 2022 Jun 27, 2022

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

Views

145

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 27, 2022 Jun 27, 2022

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?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 27, 2022 Jun 27, 2022

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 27, 2022 Jun 27, 2022

Copy link to clipboard

Copied

quote

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>

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 27, 2022 Jun 27, 2022

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?

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 27, 2022 Jun 27, 2022

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 ..."

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 27, 2022 Jun 27, 2022

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/

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 27, 2022 Jun 27, 2022

Copy link to clipboard

Copied

quote

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.

 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 27, 2022 Jun 27, 2022

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.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 27, 2022 Jun 27, 2022

Copy link to clipboard

Copied

quote

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 27, 2022 Jun 27, 2022

Copy link to clipboard

Copied

quote
quote

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 ?

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 27, 2022 Jun 27, 2022

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.  😈

 

 

 

 

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 27, 2022 Jun 27, 2022

Copy link to clipboard

Copied

quote

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 28, 2022 Jun 28, 2022

Copy link to clipboard

Copied

quote
quote
quote

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? 

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Jun 27, 2022 Jun 27, 2022

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 27, 2022 Jun 27, 2022

Copy link to clipboard

Copied

quote

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 27, 2022 Jun 27, 2022

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 😕

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 28, 2022 Jun 28, 2022

Copy link to clipboard

Copied

quote

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.

 

Nancy O'Shea, Adobe Product User & Community Professional
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Jun 28, 2022 Jun 28, 2022

Copy link to clipboard

Copied

LATEST
quote
quote

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jun 27, 2022 Jun 27, 2022

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines