A simple jQuery example of animating content when scrolling down the browser window. Using the small jQuery function adds a CSS class to two elements and animation is purely handled by CSS3, great method for those that want to separate animation from jQuery.

jsFiddle Demo

How it works?

  1. Scroll further than 10 pixels from the top of the window.
  2. Script adds class to elements to animate them into view.
  3. Elements animate according to the CSS3 properties defined.

HTML Markup

<div id="content">
    <div id="left">
    	<h2>Private Dining</h2>
   	</div>
    <div id="right">
    	<p>Our luxurious dining rooms.</p>
   	</div>
</div>

jQuery Script

function animateOnScroll(){

    $(window).scroll(function() { 
        if ($(this).scrollTop() > 10) { 
            $("div#left").addClass("animateContent");
            $("div#right").addClass("animateContent");
        } 
    });
}

$(function() {
    animateOnScroll();
});

Demo

Feel free to check out the jsFiddle demo, modify the CSS3 properties and get creative with the animation:

jsFiddle Demo