滚动显示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" 

    } 
}); 

希望这有助于:)