Как запустить анимацию при прокрутке

Question

У меня картинка анимация (вертикальный слайдер). Теперь он работает сам по себе и хотел бы, чтобы он работал только при прокрутке. А есть примеры как устроена анимация картинок при скролле? Посоветуйте, пожалуйста, как это сделать?

html

<div class="img" style="margin-top: 150px; margin-right: 240px; height:150px;">
   <ul class="images">
            <li><img src="{{ asset('img/1.png') }}" alt="" style="width: 150px; height: 120px;"></li>
            <li><img src="{{ asset('img/2') }}" alt="" style="width: 150px; height: 120px;"></li>
            <li><img src="{{ asset('img/3') }}" alt="" style="width: 150px; height: 120px;"></li>
            <li><img src="{{ asset('img/4') }}" alt="" style="width: 150px; height: 120px;"></li>
            <li><img src="{{ asset('img/5') }}" alt="" style="width: 150px; height: 120px;"></li>
            </ul>
    </div>

jQuery

var y = 0,
    img = $('.images'),
    values = img.find('li'),
    imgHeight = 0,
    nVisible = 1,
    intervalSec2 = 4000;

if(!img.find('li:first').hasClass("first")){
  img.find('li:first').addClass("first");
}

values.each(function(){
  if(y < nVisible){
    imgHeight = imgHeight + $(this).outerHeight();
    y++;
  }
});



img.css({ height: imgHeight, overflow: "hidden" });
  
function vertCycles() {
  var fItem = img.find('li.first').html();
    
  img.append('<li>'+fItem+'</li>');
  fItem = '';
  img.find('li.first').animate({ marginTop: "-163px"}, 1500,function(){  $(this).remove(); img.find('li:first').addClass("first"); });

  
}

if(intervalSec2 < 700){
  intervalSec2 = 700;
}

var init = setInterval("vertCycles()",intervalSec2);

img.hover(function(){
  clearInterval(init);
}, function(){
  init = setInterval("vertCycles()",intervalSec2);
});