Created
January 27, 2015 12:49
-
-
Save plantvsbirds/e5a29bfa1be59471d0d9 to your computer and use it in GitHub Desktop.
Stellar.js - iOS Demo // source http://jsbin.com/pevuzu
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> | |
| <title>Stellar.js - iOS Demo</title> | |
| <meta charset="utf-8"/> | |
| <meta name="viewport" content="width=device-width,maximum-scale=1.0" /> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black" /> | |
| <style type="text/css"> | |
| html { | |
| overflow: hidden; | |
| background: #333; | |
| font-family: Helvetica; | |
| } | |
| #container { | |
| position: absolute; | |
| left: 0; | |
| top: 44px; | |
| bottom: 24px; | |
| width: 100%; | |
| background: black; | |
| overflow: hidden; | |
| } | |
| .bar { | |
| position: absolute; | |
| background: #222; | |
| left: 0; | |
| width: 100%; | |
| color: #fff; | |
| padding: 5px 0; | |
| font-size: 10px; | |
| font-weight: bold; | |
| text-align: center; | |
| text-shadow: 0 -2px 0 black; | |
| -webkit-box-sizing: border-box; | |
| } | |
| .bar.top { | |
| top: 0; | |
| height: 44px; | |
| border-bottom: 1px solid #000; | |
| padding: 10px; | |
| font-size: 22px; | |
| } | |
| .bar.bottom { | |
| bottom: 0; | |
| } | |
| /* My styles */ | |
| #page { | |
| overflow: hidden; | |
| position: relative; | |
| margin: 0 auto; | |
| width: 2900px; | |
| height:100%; | |
| } | |
| .sections { | |
| margin: 0 auto; | |
| width: 2900px; | |
| height:100%; | |
| } | |
| .section { | |
| position: relative; | |
| height: 350px; | |
| } | |
| .section.two { | |
| left: 400px; | |
| } | |
| .section.three { | |
| left: 500px; | |
| } | |
| .section.four { | |
| left: 400px; | |
| } | |
| .section.five { | |
| left: 600px; | |
| } | |
| .section.seven { | |
| left: 100px; | |
| } | |
| .section.eight { | |
| left: 200px; | |
| } | |
| .section.nine { | |
| left: 400px; | |
| } | |
| .section.ten { | |
| left: 300px; | |
| } | |
| .stellar-particle { | |
| background-color: white; | |
| height: 20px; | |
| position: absolute; | |
| width: 20px; | |
| z-index: 999; | |
| } | |
| .stellar-particle.one { | |
| left: 100px; | |
| top: 10px; | |
| } | |
| .stellar-particle.two { | |
| left: 600px; | |
| top: 60px; | |
| } | |
| .stellar-particle.three { | |
| left: 110px; | |
| top: 110px; | |
| } | |
| .stellar-particle.four { | |
| left: 160px; | |
| top: 160px; | |
| } | |
| .stellar-particle.five { | |
| left: 210px; | |
| top: 210px; | |
| } | |
| a { | |
| color: white; | |
| display: inline-block; | |
| border-bottom: 1px solid white; | |
| text-decoration: none; | |
| } | |
| </style> | |
| <script src="http://code.jquery.com/jquery-git.js"></script> | |
| <script type="text/javascript" src="http://markdalgleish.com/projects/stellar.js/demos/js/scrollability.min.js"></script> | |
| <script src="http://markdalgleish.com/projects/stellar.js/js/stellar.js"></script> | |
| <script type="text/javascript" src="../js/stellar.js"></script> | |
| <script language="javascript"> | |
| $(function(){ | |
| $('#page').stellar({ | |
| horizontalScrolling: true, | |
| verticalScrolling: false, | |
| scrollProperty: 'transform', | |
| positionProperty: 'transform' | |
| }); | |
| //Prevent text selection | |
| $(document).mousedown(function(e){ | |
| e.preventDefault(); | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <div class="bar top"><a href="../">Stellar.js</a> iOS Demo</div> | |
| <div class="bar bottom">Demo created using <a href="https://github.com/joehewitt/scrollability">Scrollability</a></div> | |
| <div id="container"> | |
| <div id="page" class="scrollable horizontal"> | |
| <div class="sections"> | |
| <div class="section one"> | |
| <div class="stellar-particle one" data-stellar-ratio="3"></div> | |
| <div class="stellar-particle two" data-stellar-ratio="5"></div> | |
| <div class="stellar-particle three" data-stellar-ratio="7"></div> | |
| <div class="stellar-particle four" data-stellar-ratio="4"></div> | |
| <div class="stellar-particle five" data-stellar-ratio="9"></div> | |
| </div> | |
| <div class="section two"> | |
| <div class="stellar-particle one" data-stellar-ratio="8"></div> | |
| <div class="stellar-particle two" data-stellar-ratio="4"></div> | |
| <div class="stellar-particle three" data-stellar-ratio="2"></div> | |
| <div class="stellar-particle four" data-stellar-ratio="8"></div> | |
| <div class="stellar-particle five" data-stellar-ratio="10"></div> | |
| </div> | |
| <div class="section three"> | |
| <div class="stellar-particle one" data-stellar-ratio="10"></div> | |
| <div class="stellar-particle two" data-stellar-ratio="8"></div> | |
| <div class="stellar-particle three" data-stellar-ratio="4"></div> | |
| <div class="stellar-particle four" data-stellar-ratio="8"></div> | |
| <div class="stellar-particle five" data-stellar-ratio="10"></div> | |
| </div> | |
| <div class="section four"> | |
| <div class="stellar-particle one" data-stellar-ratio="4"></div> | |
| <div class="stellar-particle two" data-stellar-ratio="6"></div> | |
| <div class="stellar-particle three" data-stellar-ratio="3"></div> | |
| <div class="stellar-particle four" data-stellar-ratio="8"></div> | |
| <div class="stellar-particle five" data-stellar-ratio="7"></div> | |
| </div> | |
| <div class="section five"> | |
| <div class="stellar-particle one" data-stellar-ratio="2"></div> | |
| <div class="stellar-particle two" data-stellar-ratio="4"></div> | |
| <div class="stellar-particle three" data-stellar-ratio="6"></div> | |
| <div class="stellar-particle four" data-stellar-ratio="8"></div> | |
| <div class="stellar-particle five" data-stellar-ratio="10"></div> | |
| </div> | |
| <div class="section six"> | |
| <div class="stellar-particle one" data-stellar-ratio="9"></div> | |
| <div class="stellar-particle two" data-stellar-ratio="4"></div> | |
| <div class="stellar-particle three" data-stellar-ratio="3"></div> | |
| <div class="stellar-particle four" data-stellar-ratio="6"></div> | |
| <div class="stellar-particle five" data-stellar-ratio="10"></div> | |
| </div> | |
| <div class="section seven"> | |
| <div class="stellar-particle one" data-stellar-ratio="8"></div> | |
| <div class="stellar-particle two" data-stellar-ratio="6"></div> | |
| <div class="stellar-particle three" data-stellar-ratio="7"></div> | |
| <div class="stellar-particle four" data-stellar-ratio="3"></div> | |
| <div class="stellar-particle five" data-stellar-ratio="9"></div> | |
| </div> | |
| <div class="section eight"> | |
| <div class="stellar-particle one" data-stellar-ratio="2"></div> | |
| <div class="stellar-particle two" data-stellar-ratio="8"></div> | |
| <div class="stellar-particle three" data-stellar-ratio="4"></div> | |
| <div class="stellar-particle four" data-stellar-ratio="6"></div> | |
| <div class="stellar-particle five" data-stellar-ratio="7"></div> | |
| </div> | |
| <div class="section nine"> | |
| <div class="stellar-particle one" data-stellar-ratio="8"></div> | |
| <div class="stellar-particle two" data-stellar-ratio="9"></div> | |
| <div class="stellar-particle three" data-stellar-ratio="3"></div> | |
| <div class="stellar-particle four" data-stellar-ratio="6"></div> | |
| <div class="stellar-particle five" data-stellar-ratio="4"></div> | |
| </div> | |
| <div class="section ten"> | |
| <div class="stellar-particle one" data-stellar-ratio="9"></div> | |
| <div class="stellar-particle two" data-stellar-ratio="5"></div> | |
| <div class="stellar-particle three" data-stellar-ratio="6"></div> | |
| <div class="stellar-particle four" data-stellar-ratio="2"></div> | |
| <div class="stellar-particle five" data-stellar-ratio="7"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script id="jsbin-source-html" type="text/html"> | |
| <!doctype html> | |
| <html> | |
| <head> | |
| <title>Stellar.js - iOS Demo</title> | |
| <meta charset="utf-8"/> | |
| <meta name="viewport" content="width=device-width,maximum-scale=1.0" /> | |
| <meta name="apple-mobile-web-app-capable" content="yes" /> | |
| <meta name="apple-mobile-web-app-status-bar-style" content="black" /> | |
| <style type="text/css"> | |
| html { | |
| overflow: hidden; | |
| background: #333; | |
| font-family: Helvetica; | |
| } | |
| #container { | |
| position: absolute; | |
| left: 0; | |
| top: 44px; | |
| bottom: 24px; | |
| width: 100%; | |
| background: black; | |
| overflow: hidden; | |
| } | |
| .bar { | |
| position: absolute; | |
| background: #222; | |
| left: 0; | |
| width: 100%; | |
| color: #fff; | |
| padding: 5px 0; | |
| font-size: 10px; | |
| font-weight: bold; | |
| text-align: center; | |
| text-shadow: 0 -2px 0 black; | |
| -webkit-box-sizing: border-box; | |
| } | |
| .bar.top { | |
| top: 0; | |
| height: 44px; | |
| border-bottom: 1px solid #000; | |
| padding: 10px; | |
| font-size: 22px; | |
| } | |
| .bar.bottom { | |
| bottom: 0; | |
| } | |
| /* My styles */ | |
| #page { | |
| overflow: hidden; | |
| position: relative; | |
| margin: 0 auto; | |
| width: 2900px; | |
| height:100%; | |
| } | |
| .sections { | |
| margin: 0 auto; | |
| width: 2900px; | |
| height:100%; | |
| } | |
| .section { | |
| position: relative; | |
| height: 350px; | |
| } | |
| .section.two { | |
| left: 400px; | |
| } | |
| .section.three { | |
| left: 500px; | |
| } | |
| .section.four { | |
| left: 400px; | |
| } | |
| .section.five { | |
| left: 600px; | |
| } | |
| .section.seven { | |
| left: 100px; | |
| } | |
| .section.eight { | |
| left: 200px; | |
| } | |
| .section.nine { | |
| left: 400px; | |
| } | |
| .section.ten { | |
| left: 300px; | |
| } | |
| .stellar-particle { | |
| background-color: white; | |
| height: 20px; | |
| position: absolute; | |
| width: 20px; | |
| z-index: 999; | |
| } | |
| .stellar-particle.one { | |
| left: 100px; | |
| top: 10px; | |
| } | |
| .stellar-particle.two { | |
| left: 600px; | |
| top: 60px; | |
| } | |
| .stellar-particle.three { | |
| left: 110px; | |
| top: 110px; | |
| } | |
| .stellar-particle.four { | |
| left: 160px; | |
| top: 160px; | |
| } | |
| .stellar-particle.five { | |
| left: 210px; | |
| top: 210px; | |
| } | |
| a { | |
| color: white; | |
| display: inline-block; | |
| border-bottom: 1px solid white; | |
| text-decoration: none; | |
| } | |
| </style> | |
| <script src="//code.jquery.com/jquery-git.js"><\/script> | |
| <script type="text/javascript" src="http://markdalgleish.com/projects/stellar.js/demos/js/scrollability.min.js"><\/script> | |
| <script src="http://markdalgleish.com/projects/stellar.js/js/stellar.js"><\/script> | |
| <script type="text/javascript" src="../js/stellar.js"><\/script> | |
| <script language="javascript"> | |
| $(function(){ | |
| $('#page').stellar({ | |
| horizontalScrolling: true, | |
| verticalScrolling: false, | |
| scrollProperty: 'transform', | |
| positionProperty: 'transform' | |
| }); | |
| //Prevent text selection | |
| $(document).mousedown(function(e){ | |
| e.preventDefault(); | |
| }); | |
| }); | |
| <\/script> | |
| </head> | |
| <body> | |
| <div class="bar top"><a href="../">Stellar.js</a> iOS Demo</div> | |
| <div class="bar bottom">Demo created using <a href="https://github.com/joehewitt/scrollability">Scrollability</a></div> | |
| <div id="container"> | |
| <div id="page" class="scrollable horizontal"> | |
| <div class="sections"> | |
| <div class="section one"> | |
| <div class="stellar-particle one" data-stellar-ratio="3"></div> | |
| <div class="stellar-particle two" data-stellar-ratio="5"></div> | |
| <div class="stellar-particle three" data-stellar-ratio="7"></div> | |
| <div class="stellar-particle four" data-stellar-ratio="4"></div> | |
| <div class="stellar-particle five" data-stellar-ratio="9"></div> | |
| </div> | |
| <div class="section two"> | |
| <div class="stellar-particle one" data-stellar-ratio="8"></div> | |
| <div class="stellar-particle two" data-stellar-ratio="4"></div> | |
| <div class="stellar-particle three" data-stellar-ratio="2"></div> | |
| <div class="stellar-particle four" data-stellar-ratio="8"></div> | |
| <div class="stellar-particle five" data-stellar-ratio="10"></div> | |
| </div> | |
| <div class="section three"> | |
| <div class="stellar-particle one" data-stellar-ratio="10"></div> | |
| <div class="stellar-particle two" data-stellar-ratio="8"></div> | |
| <div class="stellar-particle three" data-stellar-ratio="4"></div> | |
| <div class="stellar-particle four" data-stellar-ratio="8"></div> | |
| <div class="stellar-particle five" data-stellar-ratio="10"></div> | |
| </div> | |
| <div class="section four"> | |
| <div class="stellar-particle one" data-stellar-ratio="4"></div> | |
| <div class="stellar-particle two" data-stellar-ratio="6"></div> | |
| <div class="stellar-particle three" data-stellar-ratio="3"></div> | |
| <div class="stellar-particle four" data-stellar-ratio="8"></div> | |
| <div class="stellar-particle five" data-stellar-ratio="7"></div> | |
| </div> | |
| <div class="section five"> | |
| <div class="stellar-particle one" data-stellar-ratio="2"></div> | |
| <div class="stellar-particle two" data-stellar-ratio="4"></div> | |
| <div class="stellar-particle three" data-stellar-ratio="6"></div> | |
| <div class="stellar-particle four" data-stellar-ratio="8"></div> | |
| <div class="stellar-particle five" data-stellar-ratio="10"></div> | |
| </div> | |
| <div class="section six"> | |
| <div class="stellar-particle one" data-stellar-ratio="9"></div> | |
| <div class="stellar-particle two" data-stellar-ratio="4"></div> | |
| <div class="stellar-particle three" data-stellar-ratio="3"></div> | |
| <div class="stellar-particle four" data-stellar-ratio="6"></div> | |
| <div class="stellar-particle five" data-stellar-ratio="10"></div> | |
| </div> | |
| <div class="section seven"> | |
| <div class="stellar-particle one" data-stellar-ratio="8"></div> | |
| <div class="stellar-particle two" data-stellar-ratio="6"></div> | |
| <div class="stellar-particle three" data-stellar-ratio="7"></div> | |
| <div class="stellar-particle four" data-stellar-ratio="3"></div> | |
| <div class="stellar-particle five" data-stellar-ratio="9"></div> | |
| </div> | |
| <div class="section eight"> | |
| <div class="stellar-particle one" data-stellar-ratio="2"></div> | |
| <div class="stellar-particle two" data-stellar-ratio="8"></div> | |
| <div class="stellar-particle three" data-stellar-ratio="4"></div> | |
| <div class="stellar-particle four" data-stellar-ratio="6"></div> | |
| <div class="stellar-particle five" data-stellar-ratio="7"></div> | |
| </div> | |
| <div class="section nine"> | |
| <div class="stellar-particle one" data-stellar-ratio="8"></div> | |
| <div class="stellar-particle two" data-stellar-ratio="9"></div> | |
| <div class="stellar-particle three" data-stellar-ratio="3"></div> | |
| <div class="stellar-particle four" data-stellar-ratio="6"></div> | |
| <div class="stellar-particle five" data-stellar-ratio="4"></div> | |
| </div> | |
| <div class="section ten"> | |
| <div class="stellar-particle one" data-stellar-ratio="9"></div> | |
| <div class="stellar-particle two" data-stellar-ratio="5"></div> | |
| <div class="stellar-particle three" data-stellar-ratio="6"></div> | |
| <div class="stellar-particle four" data-stellar-ratio="2"></div> | |
| <div class="stellar-particle five" data-stellar-ratio="7"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </body> | |
| </html></script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment