Skip to main content
sarahmitchell@live.com
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
    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
      Nancy OShea
      Adobe 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
        sarahmitchell@live.comAuthor
        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 ..."

        Nancy OShea
        Nancy OShea
        Adobe Expert
        June 27, 2022
        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.

         


        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— Product User, Community Expert & Moderator
        O
        osgood_
        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
          sarahmitchell@live.comAuthor
          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.

          O
          osgood_
          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>

            Terms & ConditionsAccessibility statement
            Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices