Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How do I make an animated counter start only when you scroll and get to the specific section?


cloudier

Question

Site URL: https://www.orcasoundproject.com/

Hello,

I have created an animated counter with the help of a code injection at the bottom of the landing page. However it starts the counter when loading the page instead of when you scroll to the section defeating the point of the animation as you never get to see it. 

Is there any code to make start the animation only when you scroll to the desired section?

Here is the code I've used for the animation:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Animate the element's value from 0% to 110%:
jQuery({someValue: 0}).animate({someValue: 5}, {
    duration: 2000,
    easing:'swing', // can be anything
    step: function() { // called on every step
        // Update the element's text with rounded-up value:
        $('#block-yui_3_17_2_1_1601088407765_22146 h2').text(Math.ceil(this.someValue) + "");
    }
});
});
</script>

 

Thanks!

Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

3 answers to this question

Recommended Posts

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...