滾動顯示CSS動畫

Question

我想讓bounce.js在向下滾動頁面時顯示它的動畫。到目前爲止，它只是馬上播放所有的動畫。是否有一些jQuery代碼，當你到達元素時，它可以觸發css動畫？我不知道這裏最好的做法是什麼。

CSS

.image { 
    width: 100%; 
    height: 500px; 
    margin-bottom: 60px; 
    background-color: #000; 
    animation: my-animation 1s linear both; 
} 

Bounce.js

var bounce = new Bounce(); 
bounce.scale({ 
    from: { x: 0.5, y: 0.5 }, 
    to: { x: 1, y: 1 } 
}); 
bounce.define("my-animation"); 

Answer 1

我不知道如何使用彈跳JS，所以我要給你我的答案香草JavaScript和CSS。 :)

首先，在CSS：

.image{ 
    width: 100%; 
    height: 500px; 
    margin-bottom: 60px; 
    background-color: #000; 
} 
.image.animate{ // when the element has class "animate" 
    animation: my-animation 1s linear both; // toggle animation 
} 

@keyframes my-animation{ 
    0%{ 
     transform: scale(0.5); 
    } 
    100%{ 
     transform: scale(1); // define how far you want them to move along the x/y axis 
    } 
} 

而且的JavaScript：

window.addEventListener("scroll", function(e){ 
    var image = document.querySelector(".image"); 
    if(this.scrollY == 10){ // if scrolled 10px from the top 

     image.classList.add("animate"); // add class "animate" 

    } else if(this.scrollY < 10){ // if at top of page 

     image.classList.remove("animate"); // remove class "animate" 

    } 
}); 

希望這有助於:)