Question

我正在使用来自here的开/关监视器效果，虽然我的动画不是在开关上，而是在窗口滚动上。我已经这样设置了：

＆＃13;

$(window).on('scroll', function () {
    var sctop = $(this).scrollTop();
    var element_top = $('.image_animation').offset().top;
    if (sctop > element_top) {
        $('.image_animation').addClass('off');
    } else {
        $('.image_animation').removeClass('off');
    }
});

＆＃13;

.before_content {
    height: 300px;
}
.after_content {
    height: 800px;
}
.container {
    position: relative;
}
.image_animation {
    display: inline-block;
    position: relative;
}
.image_animation img {
    z-index: 100;
}
.image_animation .background_image {
    width: 94%;
    height: 73%;
    z-index: -1;
    position: absolute;
    top: 4%;
    left: 3%;
    -webkit-background-size: cover!important;
    background-size: cover!important;
    background-repeat: no-repeat!important;
    animation: imac 10s linear 2s infinite;
}
@keyframes turn-off {
    0% {
        transform: scale(1, 1.3) translate3d(0, 0, 0);
        -webkit-filter: brightness(1);
        filter: brightness(1);
        opacity: 1;
    }
    60% {
        transform: scale(1, 0.001) translate3d(0, 0, 0);
        -webkit-filter: brightness(10);
        filter: brightness(10);
    }
    100% {
        animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
        transform: scale(0, 0.0001) translate3d(0, 0, 0);
        -webkit-filter: brightness(50);
        filter: brightness(50);
    }
}
.image_animation.off > .background_image {
    animation: turn-off 0.55s cubic-bezier(0.23, 1, 0.32, 1);
    animation-fill-mode: forwards;
}
.image_animation:before {
    content:"";
    width: 94%;
    height: 73%;
    z-index: -1;
    position: absolute;
    top: 4%;
    left: 3%;
    background: #000;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="before_content"></div>
<div class="container">
    <div class="image_animation">
        <img src="http://i.imgur.com/DL7AUy3.png" alt="">
        <div class="background_image" style="background:url(http://i.imgur.com/VRcQKtY.jpg);"></div>
    </div>
</div>
<div class="after_content"></div>

＆＃13;

关闭动画效果很好，但是我打开动画时遇到问题。我不需要像原来的代码笔那样花哨的东西，淡入就足够了。我尝试添加类on，然后使用它来启动某种css更改，但没有运气。我也试过动画，但它也不能正常工作。目前我的形象刚刚出现，这有点蹩脚。

任何想法如何在重新滚动时进行此转换？

使用css打开和关闭动画 - 更好的动画

0 个答案: