向下滚动触发动画

时间:2013-11-10 20:46:24

标签: javascript jquery css3 events animation

在这里,我创建了从彩色变为灰度的动画,但我希望它只会在用户向下滚动时启动(因为它在我的网站中有很多图像,需要向下滚动才能到达那里)

这是小提琴的例子: 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;
}

2 个答案:

答案 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