Связывание CSS3-анимаций / трансформаций с событием прокрутки - PullRequest
Новая
       34

Связывание CSS3-анимаций / трансформаций с событием прокрутки

6 голосов
/ 17 ноября 2011

Я ищу способ связать переходы CSS3 с событием прокрутки.Я ищу функциональность, аналогичную http://nizoapp.com/,, где определенные элементы будут перемещаться, когда вы доберетесь до определенной точки прокрутки на странице.Я знаю, что вам придется вызывать событие прокрутки с помощью jQuery (используя смещение и прокрутку), но мне любопытно, есть ли способ использовать CSS3 для анимации или это нужно сделать в jQuery.В любом случае, я хотел бы получить некоторую помощь о том, как начать работать над этим.Спасибо за помощь.

Ответы [ 3 ]

9 голосов
/ 17 ноября 2011

Хорошей отправной точкой может быть плагин jQuery Waypoints . Это облегчает выполнение функции всякий раз, когда вы прокручиваете элемент, а также может применять классы на основе того, что в данный момент просматривается. Затем вы можете использовать их для запуска нужной вам анимации CSS.

ОБНОВЛЕНИЕ - Я только что натолкнулся на плагин Scrollorama jQuery. Автор утверждает, что он не был тщательно протестирован, но он предназначен для того, чтобы делать именно то, что вам нужно, и определенно выглядит как хорошая отправная точка.

2 голосов
/ 28 августа 2013

Я использую метод scrollTop ().

Это добавит или удалит класс с моими свойствами анимации CSS 

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

    if (y <= 300) {
        $('#my-div').addClass('animate');
    }
    else
    {
        $('#my-div').removeClass('animate');                
    }
});

в html: 

<div id="my-div">
    <p>Lorem ipsum dolor sit amet</p>
</div>

в css: 

#my-div {
    width:200px;
    height:200px;
    background-color:red;
}
#my-div.animate {
    transition: rotate(30deg);
}
2 голосов
/ 17 ноября 2011

Нет способа связать определенный CSS с позицией прокрутки. Вам нужно будет включить немного клея JavaScript, чтобы достичь этого эффекта. Мой любимый метод - привязать к окну onscroll событие и поместить туда свой анимационный код.

...