Łączenie animacji/transformacji CSS ze zdarzeniem przewijania

Question

Poszukuję sposobu połączenia przejść CSS3 ze zdarzeniem przewijania. Szukam podobnej funkcjonalności do http://nizoapp.com/, gdzie niektóre elementy będą się przesuwać, gdy dojdziesz do określonego punktu przewijania na stronie. Wiem, że musiałbyś wywołać zdarzenie przewijania za pomocą jQuery (używając przesunięcia i przewijania), ale jestem ciekawy, czy istnieje sposób, aby użyć CSS3 dla części animacji lub jeśli to musi być zrobione w jQuery. Tak czy siak, z chęcią pomogę, jak uzyskać szybki start, żeby to zadziałało. Dzięki za pomoc.

Answer 1

Dobrym punktem wyjścia może być the jQuery Waypoints plugin. Ułatwia to wykonywanie funkcji za każdym razem, gdy przewijasz do elementu, a także można stosować klasy w oparciu o to, co aktualnie jest w widoku. Następnie możesz użyć tych, by wywołać animacje CSS, których szukasz.

UPDATE - Właśnie natknąłem się na wtyczkę jQuery the Scrollorama. Autor stwierdza, że ​​nie został dokładnie przetestowany, ale ma dokładnie to, na czym się znajdujesz i zdecydowanie wygląda na dobry punkt wyjścia.

Answer 2

Nie ma sposobu na powiązanie określonego CSS z pozycją przewijania. Aby osiągnąć ten efekt, musisz dodać trochę kleju javascript. Moją ulubioną metodą jest powiązanie zdarzenia z okna onscroll i umieszczenie tam kodu animacji.

Answer 3

Używam metody scrollTop().

Spowoduje to dodanie lub usunięcie klasy z moich css właściwości ożywionych

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

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

w HTML:

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

w CSS:

#my-div { 
    width:200px; 
    height:200px; 
    background-color:red; 
} 
#my-div.animate { 
    transition: rotate(30deg); 
}