在这里,我创建了从彩色变为灰度的动画,但我希望它只会在用户向下滚动时启动(因为它在我的网站中有很多图像,需要向下滚动才能到达那里)
这是小提琴的例子: http://jsfiddle.net/4tHWg/7/
.box {
float: left;
position: relative;
width: 14.285714286%;
}
.boxInner img {
width: 100%;
display: block;
}
.boxInner img:hover {
-webkit-filter: grayscale(0%);
}
@-webkit-keyframes toGrayScale {
to {
-webkit-filter: grayscale(100%);
}
}
.box:nth-child(1) img {
-webkit-animation: toGrayScale 1s 0.5s forwards;
}
.box:nth-child(2) img {
-webkit-animation: toGrayScale 2s 1s forwards;
}
.box:nth-child(3) img {
-webkit-animation: toGrayScale 3s 1.5s forwards;
}
答案 0 :(得分:0)
这应该可以解决问题。
$( window ).scroll(function() {
$(".box").each(function (index){
if (index == 1)
{
$(":nth-child("+index+")", $(this)).css('-webkit-animation','toGrayScale 1s 0.5s forwards');
}
if (index == 2)
{
$(":nth-child("+index+")", $(this)).css('-webkit-animation','toGrayScale 2s 1s forwards');
}
if (index == 2)
{
$(":nth-child("+index+")", $(this)).css('-webkit-animation','toGrayScale 3s 1.5s forwards');
}
});
答案 1 :(得分:0)
如果我理解你想要做什么,那么你可以使用.scroll()
功能处理滚动。如果窗口.scrollTop()
到达每个.box
的{{1}},则触发动画。
offset().top
以下是更新后的fiddle。