Created
April 1, 2014 00:17
-
-
Save jonathan-ostrander/9905207 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> | |
| <!-- saved from url=(0066)http://ihatetomatoes.net/demos/simple-parallax-scrolling-tutorial/ --> | |
| <html class="js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms no-csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths no-ie8compat skrollr skrollr-desktop" style=""><!--<![endif]--><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>Demo - Simple parallax scrolling tutorial</title> | |
| <meta name="description" content=""> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"> | |
| <link rel="author" href="https://plus.google.com/u/0/109859280204979591787/about"> | |
| <!-- Place favicon.ico and apple-touch-icon.png in the root directory --> | |
| <!-- | |
| * This demo was prepared for you by Petr Tichy - Ihatetomatoes.net | |
| * Want to see more similar demos and tutorials? | |
| * Help by spreading the word about Ihatetomatoes blog. | |
| * Facebook - https://www.facebook.com/ihatetomatoesblog | |
| * Twitter - https://twitter.com/ihatetomatoes | |
| * Google+ - https://plus.google.com/u/0/109859280204979591787/about | |
| --> | |
| <link rel="stylesheet" href="http://ihatetomatoes.net/demos/simple-parallax-scrolling-tutorial/css/normalize.css"> | |
| <link rel="stylesheet" href="http://ihatetomatoes.net/demos/simple-parallax-scrolling-tutorial/css/main.css"> | |
| <script src="./Demo - Simple parallax scrolling tutorial_files/ga.js"></script><script id="twitter-wjs" src="./Demo - Simple parallax scrolling tutorial_files/widgets.js"></script><script id="facebook-jssdk" src="./Demo - Simple parallax scrolling tutorial_files/all.js"></script><script src="./Demo - Simple parallax scrolling tutorial_files/modernizr-2.7.1.min.js"></script> | |
| </head> | |
| <body class="loaded" data-twttr-rendered="true" cz-shortcut-listen="true"> | |
| <div id="preload"> | |
| <img src="./Demo - Simple parallax scrolling tutorial_files/bcg_slide-1.jpg"> | |
| <img src="./Demo - Simple parallax scrolling tutorial_files/bcg_slide-2.jpg"> | |
| <img src="./Demo - Simple parallax scrolling tutorial_files/bcg_slide-3.jpg"> | |
| <img src="./Demo - Simple parallax scrolling tutorial_files/bcg_slide-4.jpg"> | |
| </div> | |
| <main> | |
| <section id="slide-1" class="homeSlide" style="height: 968px;"> | |
| <div class="bcg skrollable skrollable-before" data-center="background-position: 50% 0px;" data-top-bottom="background-position: 50% -100px;" data-anchor-target="#slide-1" style="background-position: 50% 0px;"> | |
| <div class="hsContainer"> | |
| <div class="hsContent skrollable skrollable-before" data-center="bottom: 200px; opacity: 1" data-top="bottom: 1200px; opacity: 0" data-anchor-target="#slide-1 h2" style="bottom: 200px; opacity: 1;"> | |
| <h2>Simple parallax scrolling is...</h2> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="slide-2" class="homeSlide" style="height: 968px;"> | |
| <div class="bcg skrollable skrollable-before" data-center="background-position: 50% 0px;" data-top-bottom="background-position: 50% -100px;" data-bottom-top="background-position: 50% 100px;" data-anchor-target="#slide-2" style="background-position: 50% 100px;"> | |
| <div class="hsContainer"> | |
| <div class="hsContent skrollable skrollable-before" data-center="opacity: 1" data-center-top="opacity: 0" data--100-bottom="opacity: 0;" data-anchor-target="#slide-2" style="opacity: 0;"> | |
| <h2>great for story telling websites.</h2> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <section id="slide-3" class="homeSlide" style="height: 968px;"> | |
| <div class="bcg skrollable skrollable-before" data-center="background-position: 50% 0px;" data-top-bottom="background-position: 50% -100px;" data-bottom-top="background-position: 50% 100px;" data-anchor-target="#slide-3" style="background-position: 50% 100px;"> | |
| <div class="hsContainer"> | |
| <div class="hsContent skrollable skrollable-before" data--50-bottom="opacity: 0;" data--200-bottom="opacity: 1;" data-center="opacity: 1" data-200-top="opacity: 0" data-anchor-target="#slide-3 h2" style="opacity: 0;"> | |
| <h2>Now go and create your own story</h2> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| </main> | |
| <script src="./Demo - Simple parallax scrolling tutorial_files/jquery.min.js"></script> | |
| <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script> | |
| <script src="./Demo - Simple parallax scrolling tutorial_files/imagesloaded.js"></script> | |
| <script src="./Demo - Simple parallax scrolling tutorial_files/skrollr.js"></script> | |
| <script src="./Demo - Simple parallax scrolling tutorial_files/_main.js"></script> | |
| <!-- Google Analytics: change UA-839919-3 to be your site's ID. --> | |
| <script> | |
| var _gaq=[['_setAccount','UA-839919-3'],['_trackPageview']]; | |
| (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; | |
| g.src='//www.google-analytics.com/ga.js'; | |
| s.parentNode.insertBefore(g,s)}(document,'script')); | |
| </script> | |
| <script type="text/javascript" src="./Demo - Simple parallax scrolling tutorial_files/awt_analytics.js"></script> | |
| <script> | |
| /** | |
| * This demo was prepared for you by Petr Tichy - Ihatetomatoes.net | |
| * Want to see more similar demos and tutorials? | |
| * Help by spreading the word about Ihatetomatoes blog. | |
| * Facebook - https://www.facebook.com/ihatetomatoesblog | |
| * Twitter - https://twitter.com/ihatetomatoes | |
| * Google+ - https://plus.google.com/u/0/109859280204979591787/about | |
| * Article URL: http://ihatetomatoes.net/simple-parallax-scrolling-tutorial/ | |
| */ | |
| ( function( $ ) { | |
| // Setup variables | |
| $window = $(window); | |
| $slide = $('.homeSlide'); | |
| $body = $('body'); | |
| //FadeIn all sections | |
| $body.imagesLoaded( function() { | |
| setTimeout(function() { | |
| // Resize sections | |
| adjustWindow(); | |
| // Fade in sections | |
| $body.removeClass('loading').addClass('loaded'); | |
| }, 800); | |
| }); | |
| function adjustWindow(){ | |
| // Init Skrollr | |
| var s = skrollr.init({ | |
| forceHeight: false, | |
| render: function(data) { | |
| //Debugging - Log the current scroll position. | |
| //console.log(data.curTop); | |
| } | |
| }); | |
| // Get window size | |
| winH = $window.height(); | |
| // Keep minimum height 550 | |
| if(winH <= 550) { | |
| winH = 550; | |
| } | |
| // Resize our slides | |
| $slide.height(winH); | |
| // Refresh Skrollr after resizing our sections | |
| s.refresh($('.homeSlide')); | |
| } | |
| } )( jQuery ); | |
| </script> | |
| </body></html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment