MidnightLightning/readme.md

## readme.md

      
    Raw
  

              readme.md
            
          
    Based on http://www.html5rocks.com/en/mobile/optimization-and-performance/

  
## webkit-animation-flip.html
<!DOCTYPE html>
<html>

<head>
	<title>Webkit Animation -- Flip</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<link rel="shortcut icon" href="img/favicon.png" />
	<style>
	body,html { width:100%; padding:0; overflow:hidden; background-color:#333; }
	div.page {
		position:absolute;
		background-color:#FFF;
		width:100%;
		height:100%;
		top:0;
		left:0;
		-webkit-backface-visibility: hidden;
		-webkit-transition-duration: 0.5s;
		-webkit-transoform-style: preserve-3d;
		box-sizing:border-box;
		padding:1em;
	}
	.normal {
		-webkit-transform: rotateY(0deg);
	}
	.flipped {
		-webkit-transform: rotateY(180deg);
	}
	</style>
</head>

<body>
<div id="front" class="page normal" style="background-color:#FEE;">
	<h1>Home</h1>
	<p><a href="javascript:goto('back')">About</a></p>
</div>
<div id="back" class="page flipped">
	<h1>About</h1>
	<p><a href="javascript:goto('front')">Home</a></p>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
	function goto(page) {
		var $target = $('div#'+page).eq(0);
		var $center = $('div.normal').eq(0);

		// Now move
		$target.attr('class', 'page normal');
		$center.attr('class', 'page flipped');
	}
</script>
</body>
</html>

## webkit-animation-slide.html
<!DOCTYPE html>
<html>

<head>
	<title>Webkit Animation -- Slide</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<link rel="shortcut icon" href="img/favicon.png" />
	<style>
	body,html { width:100%; padding:0; overflow:hidden; }
	div.page {
		position:absolute;
		width:100%;
		height:100%;
		top:0;
		left:0;
		-webkit-transform: translate3d(0,0,0);
		box-sizing:border-box;
		padding:1em;
	}
	.transition {
		-moz-transition-duration: .5s;
		-webkit-transition-duration: .5s;
		-o-transition-duration: .5s;
	}
	</style>
</head>

<body>
<div id="home" class="page stage-center" style="background-color:#FEE;">
	<h1>Home</h1>
	<p><a href="javascript:goto('about')">About</a></p>
</div>
<div id="about" class="page stage-right">
	<h1>About</h1>
	<p><a href="javascript:goto('home')">Home</a></p>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
	$(document).ready(function() {
		// Take action
		$('div.stage-right').css('left', $(window).width());
	});

	function goto(page) {
		var $target = $('div#'+page).eq(0).removeClass('transition');
		var $center = $('div.stage-center').eq(0).removeClass('transition');
		$target.css('left', $(window).width()).css('left'); // Force the browser to look up the "left" attribute and force a repaint

		// Now move
		$target.addClass('transition stage-center').css('left', 0);
		$center.addClass('transition').removeClass('stage-center').css('left', $(window).width()*-1);
	}
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>

	<head>
	<title>Webkit Animation -- Flip</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<link rel="shortcut icon" href="img/favicon.png" />
	<style>
	body,html { width:100%; padding:0; overflow:hidden; background-color:#333; }
	div.page {
	position:absolute;
	background-color:#FFF;
	width:100%;
	height:100%;
	top:0;
	left:0;
	-webkit-backface-visibility: hidden;
	-webkit-transition-duration: 0.5s;
	-webkit-transoform-style: preserve-3d;
	box-sizing:border-box;
	padding:1em;
	}
	.normal {
	-webkit-transform: rotateY(0deg);
	}
	.flipped {
	-webkit-transform: rotateY(180deg);
	}
	</style>
	</head>

	<body>
	<div id="front" class="page normal" style="background-color:#FEE;">
	<h1>Home</h1>
	<p><a href="javascript:goto('back')">About</a></p>
	</div>
	<div id="back" class="page flipped">
	<h1>About</h1>
	<p><a href="javascript:goto('front')">Home</a></p>
	</div>

	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
	<script>
	function goto(page) {
	var $target = $('div#'+page).eq(0);
	var $center = $('div.normal').eq(0);

	// Now move
	$target.attr('class', 'page normal');
	$center.attr('class', 'page flipped');
	}
	</script>
	</body>
	</html>