Здесь я создаю анимацию, которая превращается из цвета в оттенки серого, но я хочу, чтобы она начиналась только тогда, когда пользователь прокручивал вниз (так как на моем сайте с большим количеством изображений и нужно прокручивать вниз, чтобы попасть туда)
вот пример скрипки: 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;
}
Если я правильно понимаю, что вы хотите сделать, тогда вы можете обрабатывать прокрутку с .scroll()
функции .scroll()
. Затем .scrollTop()
анимацию, если окна .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'});
}
});
});
Вот обновленная скрипка.
Это должно сделать трюк.
$( 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');
}
});