Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

added example inspired by FoldScroll jQuery plugin

  • Loading branch information...
commit 87c922140cc7dca6113303cf49a091ab2f0bb661 1 parent bff7166
@Prinzhorn authored
Showing with 144 additions and 0 deletions.
  1. +1 −0  examples/README.md
  2. +143 −0 examples/foldscroll.html
View
1  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)
View
143 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>
Please sign in to comment.
Something went wrong with that request. Please try again.