Trigger animation on scroll down

Question

Здесь я создаю анимацию, которая превращается из цвета в оттенки серого, но я хочу, чтобы она начиналась только тогда, когда пользователь будет прокручивать вниз (так как на моем сайте с большим количеством изображений и нужно прокрутить вниз, чтобы попасть туда)

вот скрипку пример: 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; 
} 

Answer 1

Это должно сделать трюк.

$(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'); 
     } 
    }); 

Answer 2

Если я правильно понял, что вы хотите сделать, то вы можете справиться с прокруткой .scroll() функции. Затем активируйте анимацию, если окна .scrollTop() достигает каждого .boxoffset().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.