javascript - 仅在滚动时播放循环的 css 动画 - 滚动停止时停止

Question

我在固定的 div 上有一个连续播放的 css 动画。我想让它只在用户滚动时播放，在滚动停止时停止。我是新手，我这辈子都弄不明白。

我的CSS:

.flame {
margin:0 auto;
position:absolute;
width:100px; 
height:136px;
background:url('../images/flame.png') 0px 0px no-repeat;
-webkit-animation: flicker .4s infinite;

@-webkit-keyframes flicker { /* flame pulses */
0% {
    background-position:0px 0px; 
    opacity:.8 
}
    25% {
        background-position:0px 0px;
}
    25.1% {
        background-position:-100px 0px;        
}
    50% {
        background-position:-100px 0px;
        opacity:.4
}
    50.1% {
        background-position:-200px 0px;
}
    75% {
        background-position:-200px 0px;

}
    75.1% {
        background-position:-100px 0px;
}
    100% {
        background-position:-100px 0px;
        opacity:.8
}

我的 HTML:

<div id="flamegroup">
       <div class="flame" id="fl1"></div>
       <div class="flame" id="fl2"></div>
       <div class="flame" id="fl3"></div> 
</div>

Answer 1

基本上每隔100ms左右，就需要抓取滚动位置，然后稍微等一下，看看滚动位置有没有变化。如果没有，您可以停止播放动画。示例:

setInterval(function() {
    var tempscroll = $(window).scrollTop();
    setTimeout(function() {
    if (tempscroll == $(window).scrollTop()) {
        $(document.body).removeClass("scrolling");
    } else {
        $(document.body).addClass("scrolling");
    }
    }, 75);

}, 100);

只有当主体具有 .scrolling 类时，您的 css 才会应用动画

demo