Linking CSS3 Animations/Transforms with Scroll Event

Question

I am looking for a way to link CSS3 transitions to a scroll event. I'm looking for similar functionality to http://nizoapp.com/, where certain elements would move when you get to a certain scroll point on the page. I know you would have to call the scroll event with jQuery (using offset and scroll), but I am curious if there is a way to then use CSS3 for the animation portion or if that needs to be done in jQuery. Either way, I'd love some help on how to get a jump start on getting this to work. Thanks for the help.

Solution 1

A good starting point could be the jQuery Waypoints plugin. It makes it easy to execute a function whenever you scroll to an element, and can also apply classes based on what's currently in view. You could then use those to trigger the CSS animations that you're after.

UPDATE - I've just come across the Scrollorama jQuery plugin. The author does state that it's not been thoroughly tested, but it's designed to do precisely what you are after, and definitely looks like a good starting point.

Solution 2

There is no way link a specific CSS to a scroll position. You will need to include some javascript glue to achieve that effect. My favorite method is to bind to the window onscroll event and put your animation code there.

Solution 3

I am using the scrollTop() method.

This will add or remove a class with my css animate properties

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

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

in html:

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

in css:

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