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

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

1 个答案: