Created
January 27, 2012 10:29
-
-
Save bobmonteverde/1688190 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | |
| <title>page preview</title> | |
| <style> | |
| .fast { | |
| transition-duration: 300ms; | |
| -moz-transition-duration: 300ms; | |
| -webkit-transition-duration: 300ms; | |
| } | |
| .normal { | |
| transition-duration: 600ms; | |
| -moz-transition-duration: 600ms; | |
| -webkit-transition-duration: 600ms; | |
| } | |
| .slow { | |
| transition-duration: 900ms; | |
| -moz-transition-duration: 900ms; | |
| -webkit-transition-duration: 900ms; | |
| } | |
| .animateMargin { | |
| transition-property: margin; | |
| transition-timing-function: linear; | |
| transition-delay: 0; | |
| -moz-transition-property: margin; | |
| -moz-transition-timing-function: linear; | |
| -moz-transition-delay: 0; | |
| -webkit-transition-property: margin; | |
| -webkit-transition-timing-function: ease-out; | |
| -webkit-transition-delay: 0; | |
| } | |
| .animateOpacity { | |
| transition-property: opacity; | |
| transition-timing-function: linear; | |
| transition-delay: 0; | |
| -moz-transition-property: opacity; | |
| -moz-transition-timing-function: linear; | |
| -moz-transition-delay: 0; | |
| -webkit-transition-property: opacity; | |
| -webkit-transition-timing-function: ease-out; | |
| -webkit-transition-delay: 0; | |
| } | |
| #previewWrap { | |
| position: relative; | |
| height: 700px; | |
| width: 700px; | |
| margin: 0 auto; | |
| overflow: hidden; | |
| } | |
| #preview { | |
| display: -webkit-box; | |
| -webkit-box-orient: vertical; | |
| -webkit-box-align: start; | |
| -webkit-box-pack: start; | |
| display: -moz-box; | |
| -moz-box-orient: vertical; | |
| -moz-box-align: start; | |
| -moz-box-pack: start; | |
| display: box; | |
| box-orient: vertical; | |
| box-align: start; | |
| box-pack: start; | |
| } | |
| .document { | |
| display: -webkit-box; | |
| -webkit-box-orient: horizontal; | |
| -webkit-box-align: start; | |
| -webkit-box-pack: center; | |
| display: -moz-box; | |
| -moz-box-orient: horizontal; | |
| -moz-box-align: start; | |
| -moz-box-pack: center; | |
| display: box; | |
| box-orient: horizontal; | |
| box-align: start; | |
| box-pack: center; | |
| } | |
| .page { | |
| width: 500px; | |
| height: 600px; | |
| margin: 50px 100px; | |
| -moz-opacity:.50; | |
| opacity: .5; | |
| } | |
| .page:hover { | |
| -moz-opacity: 1; | |
| opacity: 1; | |
| } | |
| /* color pages */ | |
| .p1, .p6 { background-color: #1d64fd; } | |
| .p2, .p7 { background-color: #1d642d; } | |
| .p3, .p8 { background-color: #f364fd; } | |
| .p4, .p9 { background-color: #9d94fd; } | |
| .p5 { background-color: #4df4fd; } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="previewWrap"> | |
| <div id="preview" class="animateMargin fast"> | |
| <div class="document animateMargin fast" id="d1"> | |
| <div class="page p1 animateOpacity normal"></div> | |
| <div class="page p2"></div> | |
| <div class="page p3"></div> | |
| <div class="page p4"></div> | |
| <div class="page p5"></div> | |
| </div> | |
| <div class="document animateMargin" id="d2"> | |
| <div class="page p1"></div> | |
| <div class="page p2"></div> | |
| <div class="page p3"></div> | |
| </div> | |
| <div class="document animateMargin" id="d3"> | |
| <div class="page p1"></div> | |
| <div class="page p2"></div> | |
| <div class="page p3"></div> | |
| <div class="page p4"></div> | |
| <div class="page p5"></div> | |
| <div class="page p6"></div> | |
| <div class="page p7"></div> | |
| <div class="page p8"></div> | |
| <div class="page p9"></div> | |
| </div> | |
| <div class="document animateMargin" id="d4"> | |
| <div class="page p1"></div> | |
| </div> | |
| <div class="document animateMargin" id="d5"> | |
| <div class="page p1"></div> | |
| <div class="page p2"></div> | |
| <div class="page p3"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> | |
| <script> | |
| (function($) { | |
| $(document).ready(function() { | |
| var preview = { | |
| container: $('#preview'), | |
| current: $('#d1'), | |
| docIndex: 0, | |
| pageIndex: 0, | |
| nextDocument: function() { | |
| if (preview.docIndex + 1 >= $('.document').length) | |
| return false; | |
| preview.docIndex++; | |
| preview.pageIndex = 0; | |
| preview.current.css('margin-left', '0'); | |
| preview.current = $('#d' + (preview.docIndex + 1)); | |
| preview.container.css('margin-top', preview.docIndex * -700); | |
| }, | |
| prevDocument: function() { | |
| if (preview.docIndex <= 0) | |
| return false; | |
| preview.docIndex--; | |
| preview.pageIndex = 0; | |
| preview.current.css('margin-left', '0'); | |
| preview.current = $('#d' + (preview.docIndex + 1)); | |
| preview.container.css('margin-top', preview.docIndex * -700); | |
| }, | |
| nextPage: function() { | |
| if (preview.pageIndex + 1 >= preview.current.children().length) | |
| return false; | |
| preview.pageIndex++; | |
| preview.current.css('margin-left', preview.pageIndex * -700); | |
| }, | |
| prevPage: function() { | |
| if (preview.pageIndex <= 0) | |
| return false; | |
| preview.pageIndex--; | |
| preview.current.css('margin-left', preview.pageIndex * -700); | |
| } | |
| } | |
| $('body').on('keydown', function(e) { | |
| switch (e.keyCode) { | |
| case 37: // left arrow | |
| preview.prevPage(); return false; | |
| case 39: // right arrow | |
| preview.nextPage(); return false; | |
| case 38: // up arrow | |
| preview.prevDocument(); return false; | |
| case 40: // down arrow | |
| preview.nextDocument(); return false; | |
| } | |
| }); | |
| }); | |
| })(jQuery); | |
| </script> | |
| </bodY> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment