Skip to main content
sarahmitchell@live.com
Participating Frequently
June 27, 2022
Question

Animated Counter

  • June 27, 2022
  • 3 replies
  • 1177 views

Is there a simple, nice looking animated counter that I can paste into my webpage? I need 0 to scroll to 6000.

 

Thank you

    This topic has been closed for replies.

    3 replies

    Liam Dilley
    Inspiring
    June 28, 2022

    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.

    Nancy OShea
    Community Expert
    June 27, 2022

    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— Product User, Community Expert & Moderator
    sarahmitchell@live.com
    Participating Frequently
    June 27, 2022

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

    B i r n o u
    Community Expert
    June 27, 2022
    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.


    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 ?

    Brainiac
    June 27, 2022

    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?

    sarahmitchell@live.com
    Participating Frequently
    June 27, 2022

    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.

    Brainiac
    June 27, 2022
    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>