@charset "UTF-8";
/* CSS Document */


<!doctype html>
<html class="no-js" lang="en">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<title>CSS3 Animation Cheat Sheet - Justin Aguilar</title>

  	<link rel="stylesheet" href="css/reset.css">
  	<link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/animations.css">

  	<link rel="stylesheet" href="css/novecentowide_demibold/stylesheet.css" type="text/css" charset="utf-8">

  	<script src='js/libs/jquery-1.6.1.min.js'></script>

  	<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600' rel='stylesheet' type='text/css'>
  
</head>

<body>

	<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="./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="./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 erat volutpat.
				</p>
				<h3>
					.slideUp
				</h3>
			</div>

		</div>

	</section>

	<section id="example-2">

		<div class="example-container">

			<div id="map">
				<img src="./images/pin.png" alt="Pin" id="pin" height="311" width="212" />
			</div>

			<h3>
				.hatch
			</h3>	

		</div>		

	</section>

	<section id="example-3">

		<div id="pop-up-message" class="example-container">
			<img src="./images/x.png" alt="x" class="pulse" />
			<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 erat volutpat.
			</p>
		</div>		

		<h3>
			.slideExpandUp, .pulse
		</h3>	

	</section>	

	<section id="example-4">

		<div class="example-container">

			<span class="device-diagram">A</span>
			<img src="./images/arrow-horizontal.png" alt="Arrow" class="device-arrow"/>				
			<span class="device-diagram">Z</span>

			<h3>
				.stretchRight
			</h3>	

		</div>

	</section>

	<section id="example-5">

		<div class="example-container">

			<div class="graph-bar bar-1"></div>
			<div class="graph-bar bar-2"></div>
			<div class="graph-bar bar-3"></div>
			<div class="graph-bar bar-4"></div>

		</div>

		<h3>
			.pullUp
		</h3>	

	</section>	

	<div>
		<a href="index.html" class="back">
			&#8592; See all animations
		</a>
	</div>
	
<script>

		$(window).scroll(function() {
			$('#phone').each(function(){
			var imagePos = $(this).offset().top;
			
			var topOfWindow = $(window).scrollTop();
				if (imagePos < topOfWindow+400) {
					$(this).addClass("slideUp");
				}
			});

			$('#pin').each(function(){
			var imagePos = $(this).offset().top;
			
			var topOfWindow = $(window).scrollTop();
				if (imagePos < topOfWindow+400) {
					$(this).addClass("hatch");
				}
			});

			$('#pop-up-message').each(function(){
			var imagePos = $(this).offset().top;
			
			var topOfWindow = $(window).scrollTop();
				if (imagePos < topOfWindow+400) {
					$(this).addClass("slideExpandUp");
				}
			});		

			$('#example-4').each(function(){
			var imagePos = $(this).offset().top;
			
			var topOfWindow = $(window).scrollTop();
				if (imagePos < topOfWindow+400) {
					$('.device-arrow').addClass("stretchRight");
				}
			});		

			$('#example-5').each(function(){
			var imagePos = $(this).offset().top;
			
			var topOfWindow = $(window).scrollTop();
				if (imagePos < topOfWindow+400) {
					$('.graph-bar').addClass("pullUp");
				}
			});					
								

		});

</script>


</body>

</html>