Javascript 如何在滚动时触发此动画？

我有一把小提琴：

---

现在我想对它进行修改，使其仅在用户通过div滚动时触发，而不必将鼠标悬停在div上，但div在其屏幕上是可见的。假设这个div在一个长页面的底部，当用户到达那里时，动画结束了，他们错过了整个节目。

这个代码将在div顶部250像素处触发动画

isScrolledIntoView();
$(window).scroll(function() {
    isScrolledIntoView(); 
});
function isScrolledIntoView(){
    $('.class').each(function(){   // add the class of the divs you want trigger on scroll over
        var $this = $(this).attr("id");  
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(this).offset().top;
        var elemBottom = elemTop + $(this).height();

        if  ((elemTop >= docViewTop) && (((docViewBottom-250) >= elemTop))){
            // trigger your animation here
            // with $this as a selector
        }
    })

---

你可以使用inview或自己写一些东西。检查vieport大小，在调整大小时更改它，并检查滚动位置，然后您就知道元素是否在VIEW中，所以您希望在用户到达targetdiv后开始倒计时？或者希望倒数计时在用户到达目标时开始和结束？我希望倒数计时在用户到达目标时开始，结束不重要，但开始重要。谢谢！

isScrolledIntoView();
$(window).scroll(function() {
    isScrolledIntoView(); 
});
function isScrolledIntoView(){
    $('.class').each(function(){   // add the class of the divs you want trigger on scroll over
        var $this = $(this).attr("id");  
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(this).offset().top;
        var elemBottom = elemTop + $(this).height();

        if  ((elemTop >= docViewTop) && (((docViewBottom-250) >= elemTop))){
            // trigger your animation here
            // with $this as a selector
        }
    })