How to change the animation code when scrolling?

Question

JavaScript

codepen.io/tamak/pen/hzEer - here is the progress bar animation. What needs to be changed, or added, so that they are activated during the scroll?

This code has been mercilessly raped in multiple Googled ways, but all in vain.

jQuery(document).ready(function(){
  jQuery('.skillbar').each(function(){
    jQuery(this).find('.skillbar-bar').animate({

      width:jQuery(this).attr('data-percent')
    },6000);
  });

});

In general, the solution to the issue is described in this post. But since I don’t understand the sequence of elements in the JS code at all, I can’t apply it in our example - everything breaks for me. Help a newbie please. How to apply .start to start animation?

Answer 1

You can try this code:

$(document).ready(function(){

  var $block = $(".XXXXXX");

  $(window).scroll(function(){
    if ( $(this).scrollTop() > ZZZ ){
      $block.addClass("YYYYYY");
    } 
  });
});

This code adds the YYYYYY class to the XXXXXX block when scrolling ZZZ pixels. Those. if the user has scrolled ZZZ pixels from the top of the page, YYYYYY will be added for XXXXXX. YYYYYY can serve as the initiator of the animation.
Those. there is block XXXXXX.
The animation for this block is bound to the YYYYYY class.
If the user has scrolled ZZZ - it is activated. If you need to activate immediately (i.e. even if your finger moved the mouse wheel even a little), then instead of ZZZ put 1.
In general, throw your code in full, we'll see if you don't figure it out yourself.
Example .
And why can't you sleep at 8 o'clock in the morning on a day off?