<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8"> 
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<title>Harper Announcement</title>
	
	<link href='http://fonts.googleapis.com/css?family=Rum+Raisin' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" href="css/normalize.css" type="text/css">
	<link rel="stylesheet" href="css/style.css" type="text/css">	
</head>
<body>
	
	<div id="intro">
		<h1 id="title">
			<span id="title-line1" class="title-line">Steve</span>
			<span id="title-line2" class="title-line">And</span>
			<span id="title-line3" class="title-line">Alicia</span>
		</h1>
	</div>

	<div id="title-info">
        <p id="download">
		  <span class="accent">&#9733;</span> ARE PLEASED TO ANNOUNCE <span class="accent">&#9733;</span><br /> 
        </p>
	</div>
    

	<div id="content-wrapper">

		<div id="examples-1">
			<h2 id="fade-it">Born on XXX of December 2012</h2>
			<h2 id="fly-it">Weighing in at 6lbs 4oz</h2>
			<h2 id="spin-it">A little baby boy</h2>
			<h2 id="scale-it1">Julian</h2>
			<h2 id="scale-it2">Sydney</h2>
			<h2 id="scale-it3">Harper</h2>
		</div>
		
        <img id="scale-it4" src="images/baby.jpg" width=100 height=100/>
    </div>
    

    <script src="js/greensock/TweenMax.min.js"></script>
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  	<script>window.jQuery || document.write('<script src="js/jquery-1.7.2.min.js"><\/script>')</script>
  	<script src="js/jquery.lettering-0.6.1.min.js"></script>
	<script src="js/jquery.superscrollorama.js"></script>
	<script>
		$(document).ready(function() {
			$('body').css('visibility','visible');

			// hide content until after title animation
			$('#content-wrapper').css('display','none');
			
			// lettering.js to split up letters for animation
			$('#title-line1').lettering();
			$('#title-line2').lettering();
			$('#title-line3').lettering();
			
			// TimelineLite for title animation, then start up superscrollorama when complete
			(new TimelineLite({onComplete:initScrollAnimations}))
				.from( $('#title-line1 span'), .5, {delay: 1, css:{right:'1000px'}, ease:Back.easeOut})
				.from( $('#title-line2'), .5, {css:{top:'1000px',opacity:'0'}, ease:Expo.easeOut})
				.append([
					TweenMax.from( $('#title-line3 .char1'), .5+Math.random(), {css:{top: '-200px', right:'1000px'}, ease:Elastic.easeOut}),
					TweenMax.from( $('#title-line3 .char2'), .5+Math.random(), {css:{top: '300px', right:'1000px'}, ease:Elastic.easeOut}),
					TweenMax.from( $('#title-line3 .char3'), .5+Math.random(), {css:{top: '-400px', right:'1000px'}, ease:Elastic.easeOut}),
					TweenMax.from( $('#title-line3 .char4'), .5+Math.random(), {css:{top: '-200px', left:'1000px'}, ease:Elastic.easeOut}),
					TweenMax.from( $('#title-line3 .char5'), .5+Math.random(), {css:{top: '200px', left:'1000px'}, ease:Elastic.easeOut}),
					TweenMax.from( $('#title-line3 .char6'), .5+Math.random(), {css:{top: '100px', left:'1000px'}, ease:Elastic.easeOut})
				])
				.to( $('#title-info'), .5, {css:{opacity:.99, 'margin-top':0}, delay:-1, ease:Quad.easeOut});
        
            function initScrollAnimations() {
                				$('#content-wrapper').css('display','block');
				var controller = $.superscrollorama();
			
				// title tweens
				$('.title-line span').each(function() {
					controller.addTween(10, TweenMax.to(this, .75, {css:{top: Math.random()*-200-600, left: (Math.random()*1000)-500, rotation:Math.random()*720-360, 'font-size': Math.random()*300+150}, ease:Quad.easeOut}));
				});
				controller.addTween(10, TweenMax.to($('#title-line1'), .75, {css:{top: 600}, ease:Quad.easeOut}));
				controller.addTween(10, TweenMax.to($('#title-line2'), .75, {css:{top: 200}, ease:Quad.easeOut}));
				controller.addTween(10, TweenMax.to($('#title-line3'), .75, {css:{top: -200}, ease:Quad.easeOut}));
				
				// individual element tween examples
				controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}}));
				controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .3, {css:{right:'1200px'}, ease:Quad.easeInOut}));
				controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), .60, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut}));
				controller.addTween('#scale-it1', TweenMax.fromTo( $('#scale-it1'), .25, {css:{opacity:0, fontSize:'20px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, fontSize:'120px'}, ease:Quad.easeInOut}));
				controller.addTween('#scale-it2', TweenMax.fromTo( $('#scale-it2'), .25, {css:{opacity:0, fontSize:'20px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, fontSize:'120px'}, ease:Quad.easeInOut}));
				controller.addTween('#scale-it3', TweenMax.fromTo( $('#scale-it3'), .25, {css:{opacity:0, fontSize:'20px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, fontSize:'120px'}, ease:Quad.easeInOut}));
				controller.addTween('#scale-it4', TweenMax.fromTo( $('#scale-it4'), 1, {css:{opacity:0, width:'0px', height:'0px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, width:'683px', height:'485px'}, ease:Quad.easeInOut}));
			};
            
        });
    </script>
</body>
</html>