19
Replies
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>
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.
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.
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 ?
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
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?
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.
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.
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.
AdChoices