我正在使用这里的开关式监视器效果进行尝试,尽管我的动画不是在开关上,而是在窗口滚动时。我已经按照以下方式设置:
$(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');
}
});
.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;
}
<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>
on
类,并使用它来启动某种css变化,但没有成功。我还尝试了动画,但也不起作用。目前我的图片只是出现了,这有点糟糕。有什么办法可以在向后滚动时进行过渡吗?
offsetWidth
技巧,有没有其他方法可以解决这个问题? - dingo_dtransform: scale(1, 1) translate3d(0, 0, 0);
非常重要,可以防止图片超出容器而被拉伸。 - DGS