Запуск анимации при прокрутке вниз

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;
}
Теги:
animation
events

2 ответа

0

Если я правильно понимаю, что вы хотите сделать, тогда вы можете обрабатывать прокрутку с .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'});
        }
    });
});

Вот обновленная скрипка.

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');
        }
    });
  • 0
    это вместо css или плюс?
  • 0
    Это должно заменить CSS. ".css ('атрибут'," значение ")" дает динамический CSS, так как вы хотите связать стиль CSS с прокруткой.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню