added example inspired by FoldScroll jQuery plugin

Prinzhorn · Nov 14, 2012 · 87c9221 · 87c9221
1 parent bff7166
commit 87c9221
Show file tree

Hide file tree

Showing 2 changed files with 144 additions and 0 deletions.
diff --git a/examples/README.md b/examples/README.md
@@ -13,3 +13,4 @@ Showcasing the awesomeness of skrollr.
 * [Using two custom easing functions to create a circular motion](http://prinzhorn.github.com/skrollr/examples/circular_motion.html)
 * [Parallax background with constant speed](http://prinzhorn.github.com/skrollr/examples/bg_constant_speed_less.html)
 * [gradientsmotherfucker](http://prinzhorn.github.com/skrollr/examples/gradientsmotherfucker.html)
+* [FoldScroll](http://prinzhorn.github.com/skrollr/examples/foldscroll.html)
diff --git a/examples/foldscroll.html b/examples/foldscroll.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
+
+	<title>FoldScroll</title>
+
+	<style>
+	html, body {
+		padding:0;
+		margin:0;
+		width:100%;
+		height:100%;
+		background:#eee;
+	}
+
+	body {
+		overflow:auto;
+	}
+
+	#skrollr-body {
+		width:100%;
+	}
+
+	#skrollr-body > div {
+		width:90%;
+		max-width:1140px;
+		margin:auto;
+		background:#fff;
+		padding:1em;
+	}
+
+	.skrollable {
+		position:relative;
+
+		-webkit-transform-origin: 50% 100%;
+		-moz-transform-origin: 50% 100%;
+		transform-origin: 50% 100%;
+
+		-webkit-backface-visibility:hidden;
+		-moz-backface-visibility:hidden;
+		backface-visibility:hidden;
+
+		-webkit-transform-style:preserve-3d;
+		-moz-transform-style:preserve-3d;
+		transform-style:preserve-3d;
+	}
+	</style>
+</head>
+
+<body>
+	<div id="skrollr-body">
+		<div data-top="opacity:1;transform:perspective(900px) rotateX(0deg);" data-top-bottom="opacity:0.3;transform:perspective(900px) rotateX(90deg);">
+			<h1>Bacon</h1>
+			<p>
+				Bacon ipsum dolor sit amet ham bacon pig, tail swine shank ground round cow. Tenderloin pig tongue turkey spare ribs. Fatback boudin turkey meatloaf meatball shank. Leberkas tongue pancetta tenderloin strip steak turducken. Meatball corned beef hamburger capicola pig cow pork chop jerky tenderloin beef andouille ham pork shankle sausage. Chuck ground round hamburger venison andouille ham hock ribeye jerky corned beef swine fatback strip steak.
+			</p>
+		</div>
+		<div data-top="opacity:1;transform:perspective(900px) rotateX(0deg);" data-top-bottom="opacity:0.3;transform:perspective(900px) rotateX(90deg);">
+			<h1>Bacon</h1>
+			<p>
+				Bacon ipsum dolor sit amet ham bacon pig, tail swine shank ground round cow. Tenderloin pig tongue turkey spare ribs. Fatback boudin turkey meatloaf meatball shank. Leberkas tongue pancetta tenderloin strip steak turducken. Meatball corned beef hamburger capicola pig cow pork chop jerky tenderloin beef andouille ham pork shankle sausage. Chuck ground round hamburger venison andouille ham hock ribeye jerky corned beef swine fatback strip steak.
+			</p>
+		</div>
+		<div data-top="opacity:1;transform:perspective(900px) rotateX(0deg);" data-top-bottom="opacity:0.3;transform:perspective(900px) rotateX(90deg);">
+			<h1>Bacon</h1>
+			<p>
+				Bacon ipsum dolor sit amet ham bacon pig, tail swine shank ground round cow. Tenderloin pig tongue turkey spare ribs. Fatback boudin turkey meatloaf meatball shank. Leberkas tongue pancetta tenderloin strip steak turducken. Meatball corned beef hamburger capicola pig cow pork chop jerky tenderloin beef andouille ham pork shankle sausage. Chuck ground round hamburger venison andouille ham hock ribeye jerky corned beef swine fatback strip steak.
+			</p>
+		</div>
+		<div data-top="opacity:1;transform:perspective(900px) rotateX(0deg);" data-top-bottom="opacity:0.3;transform:perspective(900px) rotateX(90deg);">
+			<h1>Bacon</h1>
+			<p>
+				Bacon ipsum dolor sit amet ham bacon pig, tail swine shank ground round cow. Tenderloin pig tongue turkey spare ribs. Fatback boudin turkey meatloaf meatball shank. Leberkas tongue pancetta tenderloin strip steak turducken. Meatball corned beef hamburger capicola pig cow pork chop jerky tenderloin beef andouille ham pork shankle sausage. Chuck ground round hamburger venison andouille ham hock ribeye jerky corned beef swine fatback strip steak.
+			</p>
+		</div>
+		<div data-top="opacity:1;transform:perspective(900px) rotateX(0deg);" data-top-bottom="opacity:0.3;transform:perspective(900px) rotateX(90deg);">
+			<h1>Bacon</h1>
+			<p>
+				Bacon ipsum dolor sit amet ham bacon pig, tail swine shank ground round cow. Tenderloin pig tongue turkey spare ribs. Fatback boudin turkey meatloaf meatball shank. Leberkas tongue pancetta tenderloin strip steak turducken. Meatball corned beef hamburger capicola pig cow pork chop jerky tenderloin beef andouille ham pork shankle sausage. Chuck ground round hamburger venison andouille ham hock ribeye jerky corned beef swine fatback strip steak.
+			</p>
+		</div>
+		<div data-top="opacity:1;transform:perspective(900px) rotateX(0deg);" data-top-bottom="opacity:0.3;transform:perspective(900px) rotateX(90deg);">
+			<h1>Bacon</h1>
+			<p>
+				Bacon ipsum dolor sit amet ham bacon pig, tail swine shank ground round cow. Tenderloin pig tongue turkey spare ribs. Fatback boudin turkey meatloaf meatball shank. Leberkas tongue pancetta tenderloin strip steak turducken. Meatball corned beef hamburger capicola pig cow pork chop jerky tenderloin beef andouille ham pork shankle sausage. Chuck ground round hamburger venison andouille ham hock ribeye jerky corned beef swine fatback strip steak.
+			</p>
+		</div>
+		<div data-top="opacity:1;transform:perspective(900px) rotateX(0deg);" data-top-bottom="opacity:0.3;transform:perspective(900px) rotateX(90deg);">
+			<h1>Bacon</h1>
+			<p>
+				Bacon ipsum dolor sit amet ham bacon pig, tail swine shank ground round cow. Tenderloin pig tongue turkey spare ribs. Fatback boudin turkey meatloaf meatball shank. Leberkas tongue pancetta tenderloin strip steak turducken. Meatball corned beef hamburger capicola pig cow pork chop jerky tenderloin beef andouille ham pork shankle sausage. Chuck ground round hamburger venison andouille ham hock ribeye jerky corned beef swine fatback strip steak.
+			</p>
+		</div>
+		<div data-top="opacity:1;transform:perspective(900px) rotateX(0deg);" data-top-bottom="opacity:0.3;transform:perspective(900px) rotateX(90deg);">
+			<h1>Bacon</h1>
+			<p>
+				Bacon ipsum dolor sit amet ham bacon pig, tail swine shank ground round cow. Tenderloin pig tongue turkey spare ribs. Fatback boudin turkey meatloaf meatball shank. Leberkas tongue pancetta tenderloin strip steak turducken. Meatball corned beef hamburger capicola pig cow pork chop jerky tenderloin beef andouille ham pork shankle sausage. Chuck ground round hamburger venison andouille ham hock ribeye jerky corned beef swine fatback strip steak.
+			</p>
+		</div>
+		<div data-top="opacity:1;transform:perspective(900px) rotateX(0deg);" data-top-bottom="opacity:0.3;transform:perspective(900px) rotateX(90deg);">
+			<h1>Bacon</h1>
+			<p>
+				Bacon ipsum dolor sit amet ham bacon pig, tail swine shank ground round cow. Tenderloin pig tongue turkey spare ribs. Fatback boudin turkey meatloaf meatball shank. Leberkas tongue pancetta tenderloin strip steak turducken. Meatball corned beef hamburger capicola pig cow pork chop jerky tenderloin beef andouille ham pork shankle sausage. Chuck ground round hamburger venison andouille ham hock ribeye jerky corned beef swine fatback strip steak.
+			</p>
+		</div>
+		<div data-top="opacity:1;transform:perspective(900px) rotateX(0deg);" data-top-bottom="opacity:0.3;transform:perspective(900px) rotateX(90deg);">
+			<h1>Bacon</h1>
+			<p>
+				Bacon ipsum dolor sit amet ham bacon pig, tail swine shank ground round cow. Tenderloin pig tongue turkey spare ribs. Fatback boudin turkey meatloaf meatball shank. Leberkas tongue pancetta tenderloin strip steak turducken. Meatball corned beef hamburger capicola pig cow pork chop jerky tenderloin beef andouille ham pork shankle sausage. Chuck ground round hamburger venison andouille ham hock ribeye jerky corned beef swine fatback strip steak.
+			</p>
+		</div>
+		<div data-top="opacity:1;transform:perspective(900px) rotateX(0deg);" data-top-bottom="opacity:0.3;transform:perspective(900px) rotateX(90deg);">
+			<h1>Bacon</h1>
+			<p>
+				Bacon ipsum dolor sit amet ham bacon pig, tail swine shank ground round cow. Tenderloin pig tongue turkey spare ribs. Fatback boudin turkey meatloaf meatball shank. Leberkas tongue pancetta tenderloin strip steak turducken. Meatball corned beef hamburger capicola pig cow pork chop jerky tenderloin beef andouille ham pork shankle sausage. Chuck ground round hamburger venison andouille ham hock ribeye jerky corned beef swine fatback strip steak.
+			</p>
+		</div>
+	</div>
+
+	<script type="text/javascript" src="../dist/skrollr.min.js"></script>
+
+	<script type="text/javascript">
+	//http://detectmobilebrowsers.com/
+	(function(a) {
+		if(/android|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(ad|hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|playbook|silk/i.test(a)
+		||
+		/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))
+		{
+			//Add skrollr mobile on mobile devices.
+			document.write('<script type="text/javascript" src="../dist/skrollr.mobile.min.js"><\/script>');
+		}
+	})(navigator.userAgent||navigator.vendor||window.opera);
+	</script>
+
+	<script type="text/javascript">
+	var s = skrollr.init({
+		forceHeight: false
+	});
+	</script>
+</body>
+
+</html>