0

ここでは、カラーからグレースケールに変わるアニメーションを作成しますが、ユーザーが下にスクロールしたときにのみ開始するようにします (私のサイトには多くの画像があり、下にスクロールする必要があるため)。

ここにフィドルの例があります: 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;
}
4

2 に答える 2

0

あなたが何をしようとしているのかを正しく理解していれば、.scroll()関数でスクロールを処理できます。次に、ウィンドウ.scrollTop()がそれぞれ.boxのに到達した場合にアニメーションをトリガーしますoffset().top。

$(window).scroll(function(){
    var st = $(this).scrollTop();

    $('.box').each(function(index, element){
        if(st >= $(this).offset().top){
            $(this).find('img').css({'-webkit-animation':'toGrayScale 1s 1s forwards'});
        }
    });
});

これが更新されたfiddleです。

于 2013-11-11T04:46:47.293 に答える