Анимация

HTML

<link rel="stylesheet" href="http://www.justinaguilar.com/animations/css/reset.css">
<link rel="stylesheet" href="http://www.justinaguilar.com/animations/css/style.css">
<link rel="stylesheet" href="http://www.justinaguilar.com/animations/css/animations.css">
<link rel="stylesheet" href="http://www.justinaguilar.com/animations/css/novecentowide_demibold/stylesheet.css">
<script src="http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600"></script>
<header class="header">
		<h1 id="logo-type"><a href="index.html">CSS3 Animation Cheat Sheet</a></h1>
		<nav class="nav">
			<ul>
				<li class="hide"><a href="index.html#how">How it works</a></li>
				<li><a href="scrolling.html">Examples</a></li>
				<li><a href="index.html#download">Download</a></li>
				<li class="hide"><a href="https://twitter.com/intent/tweet?original_referer=https%3A%2F%2Ftwitter.com%2Fabout%2Fresources%2Fbuttons&text=Check%20out%20this%20awesome%20set%20of%20CSS3%20animations%20for%20your%20website&tw_p=tweetbutton&url=http%3A%2F%2Fwww.justinaguilar.com%2Fanimations%2F&via=JXTN" target="blank">Share</a></li>
			</ul>
		</nav>
	</header>	

	<section id="intro">

		<h1>
			EXAMPLES
		</h1>

		<div class="animation-container">
			<div id="object" class="animate fadeIn"></div>
		</div>

		<div id="intro-copy">
			<img src="http://www.justinaguilar.com/animations/images/arrow.png" alt="Arrow" id="arrow" class="pulse" />
			<p>Scroll down</p>
		</div>
	</section>


	<section id="example-1">

		<div class="example-container">
			<img src="http://www.justinaguilar.com/animations/images/phone.png" alt="Image of a phone" id="phone" class="animate" />

			<div class="copy">
				<h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h2>
				<p>
					Vestibulum euismod odio quis pretium hendrerit. Pellentesque fringilla suscipit ipsum ut euismod. Phasellus quis porttitor eros, vitae luctus est. Vivamus ut porta massa. Suspendisse id erat placerat, pulvinar nunc at, fringilla risus. Aliquam...

JavaScript

jQuery(function(f){
    var topOfWindow,
        el1 = f('#example-1'),
        el2 = f('#example-2'),
        el3 = f('#example-3'),
        el4 = f('#example-4'),
        el5 = f('#example-5');
    
    f(window).scroll(function() {
        topOfWindow = 400 + f(window).scrollTop();
        
        function addAnimation(el, style){
           if (el.hasClass(style)) return true;
           el.offset().top < topOfWindow && el.addClass(style);
        }
        
        addAnimation( el1, 'slideUp');
        addAnimation( el2, 'slideExpandUp');
        addAnimation( el3, 'slideExpandUp pulse');
        addAnimation( el4, 'stretchRight');
        addAnimation( el5, 'pullUp') && f(this).unbind('scroll');

	}); 
});