javascript - 滚动到页面的特定部分后启动 CSS 动画

Question

我正在尝试在网页上使用 CSS 为图像制作动画。动画工作正常，但我只想在用户到达页面的特定部分时才启动动画。这是我的代码:

<div class="sec1-right">
   <img class="sec1-dmush1" src ="sec1-dmush1.png">
</div>

CSS

.sec1-right{
    position: relative;
    width: 50%;
    float: right;
    box-sizing: border-box;
    min-height: 600px;
    margin-top: 86px;
}

/* first section animation */
.sec1-dmush1 {
    animation: fadeAndScale .9s cubic-bezier(.45,-0.22,.34,1.69);
    transform-origin:center bottom;
    max-width: 150px;
    width: 100%;
    position: absolute;
    left: 180px;
    top: 300px;
    z-index: 0;
}

动画

@keyframes fadeAndScale{
    from{
        opacity:0;
        transform: scale3d(0,0,1);
    }
    to{
        opacity: 1;
        transform: scale3d(1,1,1);
    }
}

我怎样才能实现

Answer 1

您需要在 javascript 中编写 scroll 事件。元素 offsetTop 减去 window 高度。因此，一旦元素进入视口(viewport)，事件就会开始。

Javascript:

var scrollpos = window.scrollY; // window scroll position
var wh = window.innerHeight-50; // as soon as element touches bottom with offset event starts
var element = document.querySelector(".sec1-dmush1"); //element

window.addEventListener('scroll', function(){ 
    if(scrollpos > (element.offsetTop - wh)){
        element.classList.add("onScroll");
    }
});

JsFiddle

jQuery:

$(window).scroll(function(){
  var wh = $(window).height()-50;
    if($(window).scrollTop() > $('.sec1-dmush1').offset().top-wh){
    $('.sec1-dmush1').addClass('onScroll');
  }
});

jsFiddle

如果您有多个元素需要设置动画。您可以使用 waypoint js 减少一些努力。

var wh = $(window).height();
var waypoints = $('.sec1-dmush1').waypoint(function(direction) {
    $(this.element).addClass('onScroll');
  console.log(11);
}, {
    offset: wh-50
});

jsFiddle