|
|
| Line 1: |
Line 1: |
| − | <html>
| |
| − | <head>
| |
| − | <style>
| |
| − | html, body, div, span, p, a, del, em, img, ol, ul, li, fieldset, form, label {
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | border: 0;
| |
| − | font-size: 100%;
| |
| − | font: inherit;
| |
| − | vertical-align: baseline;
| |
| − | }
| |
| | | | |
| − | article, aside, details, figcaption, figure,
| |
| − | footer, header, hgroup, menu, nav, section {
| |
| − | display: block;
| |
| − | }
| |
| − |
| |
| − | html, body {
| |
| − | line-height: 1;
| |
| − | min-height:100%;
| |
| − | font-family:Artial, Verdana, sans-serif;
| |
| − | }
| |
| − |
| |
| − | body {
| |
| − | background: #eeeeee;
| |
| − | background: -webkit-linear-gradient(top, #eeeeee, #cccccc 100%);
| |
| − | background: -moz-linear-gradient(top, #eeeeee, #cccccc 100%);
| |
| − | background: -o-linear-gradient(top, #eeeeee, #cccccc 100%);
| |
| − | background: -ms-linear-gradient(top, #eeeeee, #cccccc 100%);
| |
| − | background: linear-gradient(top, #eeeeee, #cccccc 100%);
| |
| − | background-attachment:fixed;
| |
| − | }
| |
| − |
| |
| − | ol, ul {
| |
| − | list-style: none;
| |
| − | }
| |
| − |
| |
| − | p {
| |
| − | margin:1em 0;
| |
| − | line-height:1.1em;
| |
| − | }
| |
| − |
| |
| − | q {
| |
| − | font-style:italic;
| |
| − | color:#333;
| |
| − | }
| |
| − |
| |
| − | h1 {
| |
| − | font-size:2.91em;
| |
| − | margin:0;
| |
| − | }
| |
| − |
| |
| − | h1 > small {
| |
| − | text-align:right;
| |
| − | display:inline-block;
| |
| − | font-size:.71em;
| |
| − | text-indent:15em;
| |
| − | color:#444;
| |
| − | }
| |
| − |
| |
| − | h2 {
| |
| − | color:inherit;
| |
| − | font-size:1.91em;
| |
| − | margin:2em 0 1em 0;
| |
| − | }
| |
| − |
| |
| − | h2:first-child {margin-top:0;}
| |
| − |
| |
| − | h3 {
| |
| − | color:#333;
| |
| − | font-size:1.41em;
| |
| − | margin:1em 0;
| |
| − | }
| |
| − |
| |
| − | h4 {
| |
| − | color:#444;
| |
| − | font-size:1.11em;
| |
| − | margin:1em 0;
| |
| − | }
| |
| − |
| |
| − | #progress {
| |
| − | height:2%;
| |
| − | background:#444;
| |
| − | bottom:0;
| |
| − | z-index:200;
| |
| − | }
| |
| − |
| |
| − | #scrollbar {
| |
| − | position:fixed;
| |
| − | right:2px;
| |
| − | height:50px;
| |
| − | width:6px;
| |
| − | background:#444;
| |
| − | background:rgba(0,0,0,0.6);
| |
| − | border:1px solid rgba(255,255,255,0.6);
| |
| − | z-index:300;
| |
| − | border-radius:3px;
| |
| − | }
| |
| − |
| |
| − | .skrollr-desktop #scrollbar {display:none;}
| |
| − |
| |
| − | #bg1, #bg2, #bg3 {
| |
| − | z-index:50;
| |
| − | top:0;
| |
| − | left:0;
| |
| − | width:100%;
| |
| − | height:100%;
| |
| − | background:url("https://static.igem.org/mediawiki/2016/1/12/Bubbles_back.png") repeat 0 0;
| |
| − | }
| |
| − |
| |
| − | #bg2 {
| |
| − | z-index:49;
| |
| − | background-image:url("https://static.igem.org/mediawiki/2016/f/fd/Bubbles2.png");
| |
| − | }
| |
| − |
| |
| − | #bg3 {
| |
| − | z-index:48;
| |
| − | background-image:url("https://static.igem.org/mediawiki/2016/2/23/Bubbles3.png");
| |
| − | }
| |
| − |
| |
| − | #intro {
| |
| − | width:80%;
| |
| − | left:50%;
| |
| − | top:1em;
| |
| − | margin-left:-40%;
| |
| − | padding:2em;
| |
| − | background:#fff;
| |
| − | text-align:center;
| |
| − | border-radius:1em;
| |
| − |
| |
| − | -webkit-transform-origin:0 0;
| |
| − | -moz-transform-origin:0 0;
| |
| − | -ms-transform-origin:0 0;
| |
| − | -o-transform-origin:0 0;
| |
| − | transform-origin:0 0;
| |
| − |
| |
| − | -webkit-box-sizing: border-box;
| |
| − | -moz-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| − |
| |
| − | #intro .arrows {
| |
| − | font-size:2em;
| |
| − | color:#09f;
| |
| − | }
| |
| − |
| |
| − | #transform {
| |
| − | width:70%;
| |
| − | left:50%;
| |
| − | top:20%;
| |
| − | margin-left:-35%;
| |
| − | text-align:center;
| |
| − | font-size:150%;
| |
| − |
| |
| − | .transform-origin(50%, 50%);
| |
| − | }
| |
| − |
| |
| − | #properties {
| |
| − | width:100%;
| |
| − | height:100%;
| |
| − | padding-top:10%;
| |
| − | text-align:center;
| |
| − |
| |
| − | -webkit-box-sizing: border-box;
| |
| − | -moz-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| − |
| |
| − | #easing_wrapper {
| |
| − | width:100%;
| |
| − | height:100%;
| |
| − | }
| |
| − |
| |
| − | #easing {
| |
| − | top:10%;
| |
| − | width:50%;
| |
| − | z-index:101;
| |
| − | }
| |
| − |
| |
| − | .drop {
| |
| − | background:#09f;
| |
| − | font-weight:bold;
| |
| − | padding:1em;
| |
| − | }
| |
| − |
| |
| − | #download {
| |
| − | width:80%;
| |
| − | left:10%;
| |
| − | height:80%;
| |
| − | padding:3em;
| |
| − | border:0 solid #222;
| |
| − |
| |
| − | -webkit-box-sizing: border-box;
| |
| − | -moz-box-sizing: border-box;
| |
| − | box-sizing: border-box;
| |
| − | }
| |
| − |
| |
| − | #top_title, #sideMenu{
| |
| − | display: none;
| |
| − | }
| |
| − |
| |
| − | #content
| |
| − | {
| |
| − | width: 100%;
| |
| − | padding: 0;
| |
| − | border: 0;
| |
| − | }
| |
| − |
| |
| − | #globalWrapper
| |
| − | {
| |
| − | padding: 0;
| |
| − | font-size: 100%;
| |
| − | }
| |
| − |
| |
| − | </style>
| |
| − | <meta charset="utf-8">
| |
| − |
| |
| − | <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
| |
| − |
| |
| − | <title>skrollr - parallax scrolling for the masses</title>
| |
| − |
| |
| − | <link rel="stylesheet" href="https://2016.igem.org/Template:ShanghaitechChina/css/test2?action=raw&ctype=text/css">
| |
| − | <link rel="stylesheet" href="https://2016.igem.org/Template:ShanghaitechChina/css/test1?action=raw&ctype=text/css">
| |
| − | <script src="https://2016.igem.org/Template:ShanghaitechChina/js/skollr?action=raw&ctype=text/javascript"></script>
| |
| − |
| |
| − | </head>
| |
| − |
| |
| − | <body>
| |
| − | <div id="bg1" data-0="background-position:0px 0px;" data-end="background-position:-500px -10000px;"></div>
| |
| − | </div></div></div></div>
| |
| − | <div id="bg2" data-0="background-position:0px 0px;" data-end="background-position:-500px -8000px;"></div>
| |
| − | <div id="bg3" data-0="background-position:0px 0px;" data-end="background-position:-500px -6000px;"></div>
| |
| − |
| |
| − | <div id="progress" data-0="width:0%;background:hsl(200, 100%, 50%);" data-end="width:100%;background:hsl(920, 100%, 50%);"></div>
| |
| − |
| |
| − | <div id="intro" data-0="opacity:1;top:3%;transform:rotate(0deg);transform-origin:0 0;" data-500="opacity:0;top:-10%;transform:rotate(-90deg);">
| |
| − | <h1><a href="https://github.com/Prinzhorn/skrollr">skrollr</a></h1>
| |
| − | <h2>parallax scrolling for the masses</h2>
| |
| − | <p>let's get scrollin' ;-)</p>
| |
| − | <p class="arrows">▼ ▼ ▼</p>
| |
| − | </div>
| |
| − |
| |
| − | <div id="transform" data-500="transform:scale(0) rotate(0deg);" data-1000="transform:scale(1) rotate(1440deg);opacity:1;" data-1600="" data-1700="transform:scale(5) rotate(3240deg);opacity:0;">
| |
| − | <h2>transform</h2>
| |
| − | <p>scale, skew and rotate the sh** out of any element</p>
| |
| − | </div>
| |
| − |
| |
| − | <div id="properties" data-1700="top:100%;" data-2200="top:0%;" data-3000="display:block;" data-3700="top:-100%;display:none;">
| |
| − | <h2>all numeric properties</h2>
| |
| − | <p>width, height, padding, font-size, z-index, blah blah blah</p>
| |
| − | </div>
| |
| − |
| |
| − | <div id="easing_wrapper" data-0="display:none;" data-3900="display:block;" data-4900="background:rgba(0, 0, 0, 0);color[swing]:rgb(0,0,0);" data-5900="background:rgba(0,0,0,1);color:rgb(255,255,255);" data-10000="top:0%;" data-12000="top:-100%;">
| |
| − | <div id="easing" data-3900="left:100%" data-4600="left:25%;">
| |
| − | <h2>easing?</h2>
| |
| − | <p>sure.</p>
| |
| − | <p>let me dim the <span data-3900="" data-4900="color[swing]:rgb(0,0,0);" data-5900="color:rgb(255,255,0);">lights</span> for this one...</p>
| |
| − | <p data-5900="opacity:0;font-size:100%;" data-6500="opacity:1;font-size:150%;">you can set easings for each property and define own easing functions</p>
| |
| − | </div>
| |
| − |
| |
| − | <div class="drop" data-6500="left:15%;bottom:100%;" data-9500="bottom:0%;">linear</div>
| |
| − | <div class="drop" data-6500="left:25%;bottom[quadratic]:100%;" data-9500="bottom:0%;">quadratic</div>
| |
| − | <div class="drop" data-6500="left:35%;bottom[cubic]:100%;" data-9500="bottom:0%;">cubic</div>
| |
| − | <div class="drop" data-6500="left:45%;bottom[swing]:100%;" data-9500="bottom:0%;">swing</div>
| |
| − | <div class="drop" data-6500="left:55%;bottom[WTF]:100%;" data-9500="bottom:0%;">WTF</div>
| |
| − | <div class="drop" data-6500="left:65%;bottom[inverted]:100%;" data-9500="bottom:0%;">inverted</div>
| |
| − | <div class="drop" data-6500="left:75%;bottom[bounce]:100%;" data-9500="bottom:0%;">bounce</div>
| |
| − | </div>
| |
| − |
| |
| − | <div id="download" data-10000="top[cubic]:100%;border-radius[cubic]:0em;background:rgb(0,50,100);border-width:0px;" data-12000="top:10%;border-radius:2em;background:rgb(190,230,255);border-width:10px;">
| |
| − | <h2>the end</h2>
| |
| − | <p>by the way, you can also animate colors (you did notice this, didn't you?)</p>
| |
| − | <p><strong>Now get this thing on <a href="https://github.com/Prinzhorn/skrollr">GitHub</a> and spread the word, it's open source!</strong> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://prinzhorn.github.com/skrollr/" data-via="Prinzhorn">Tweet</a>
| |
| − | <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>
| |
| − | <p>Check out more <a href="https://github.com/Prinzhorn/skrollr/tree/master/examples#examples">examples</a>.</p>
| |
| − | <p>Handcrafted by <a href="https://twitter.com/Prinzhorn" class="twitter-follow-button" data-show-count="false">Follow @Prinzhorn</a>
| |
| − | <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>
| |
| − | </div>
| |
| − |
| |
| − | <div id="scrollbar" data-0="top:0%;margin-top:2px;" data-end="top:100%;margin-top:-52px;"></div>
| |
| − |
| |
| − | <script data-main="scripts/main" src="scripts/require.js"></script>
| |
| − | <script>
| |
| − | var s = skrollr.init({
| |
| − | edgeStrategy: 'set',
| |
| − | easing: {
| |
| − | WTF: Math.random,
| |
| − | inverted: function(p) {
| |
| − | return 1-p;
| |
| − | }
| |
| − | }
| |
| − | });
| |
| − | </script>
| |
| − |
| |
| − | </body>
| |
