jquery - 在滚动条上显示 CSS 动画

Question

当您向下滚动页面时，我试图让 bounce.js 显示它的动画。截至目前，它只是立即播放所有动画。当您到达元素时，是否有一些 jQuery 代码可以触发 css 动画？我不知道这里的最佳做法是什么。

CSS

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

弹跳.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

我不知道如何使用 Bounce 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"

    }
});

希望这对您有所帮助:)