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

我不知道如何使用 Bounce JS ，所以我将以vanilla 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"

    }
});

希望这有助于：）

滚动显示CSS动画

1 个答案: