"
Team:Cornell/sandbox
From 2013.igem.org
(Difference between revisions)
| Line 334: | Line 334: | ||
}).remove(); | }).remove(); | ||
| - | // | + | //parallax |
$(document).delay(1000).keydown(function(e){ | $(document).delay(1000).keydown(function(e){ | ||
//down or right | //down or right | ||
if (e.which == 40 || e.which == 39) { | if (e.which == 40 || e.which == 39) { | ||
if($("#second-last-screen").css('left') > '0') { //only scroll if we haven't reached the far right | if($("#second-last-screen").css('left') > '0') { //only scroll if we haven't reached the far right | ||
| - | $(". | + | $(".parallax").each(function() { |
| - | var speed = | + | var speed = parseInt($(this).data('speed'), 10); //in milliseconds |
$(this).animate( { left: '-=100%' }, speed); //move to the right | $(this).animate( { left: '-=100%' }, speed); //move to the right | ||
}); | }); | ||
| Line 351: | Line 351: | ||
else if(e.which == 38 || e.which == 37) { | else if(e.which == 38 || e.which == 37) { | ||
if($("#first-screen").css('left') < '0') { //only scroll if we haven't reached the far left | if($("#first-screen").css('left') < '0') { //only scroll if we haven't reached the far left | ||
| - | $(". | + | $(".parallax").each(function() { |
| - | var speed = | + | var speed = parseInt($(this).data('speed'), 10); //in milliseconds |
$(this).animate( { left: '+=100%' }, speed); //move to the left | $(this).animate( { left: '+=100%' }, speed); //move to the left | ||
}); | }); | ||
| Line 359: | Line 359: | ||
return false; //prevent more keydown events from firing | return false; //prevent more keydown events from firing | ||
} | } | ||
| - | }); | + | }); |
}); | }); | ||
</script> | </script> | ||
| Line 386: | Line 386: | ||
<!-- NOTE: first-screen and second-last-screen have to be manually set if layout is changed --> | <!-- NOTE: first-screen and second-last-screen have to be manually set if layout is changed --> | ||
<!-- Screen 1 --> | <!-- Screen 1 --> | ||
| - | <div id="first-screen" class="screen" data-speed=" | + | <div id="first-screen" class="screen" data-speed="500" data-dist="100"> |
| - | <div class="parallax" data-speed="110" style="left: 22%; top: 10%"> | + | <div class="parallax" data-speed="1000" data-dist="110" style="left: 22%; top: 10%"> |
<h4> Inspired by this site ---> </h4> | <h4> Inspired by this site ---> </h4> | ||
</div> | </div> | ||
| - | <div class="parallax" data-speed=" | + | <div class="parallax" data-speed="1000" data-dist="100" style="left: 40%; top: 10%"> |
<a href="http://hotdot.pro/en/#" target="_blank"> <h1 style="color: #871414"> http://hotdot.pro/en/# </h1> </a> | <a href="http://hotdot.pro/en/#" target="_blank"> <h1 style="color: #871414"> http://hotdot.pro/en/# </h1> </a> | ||
</div> | </div> | ||
| - | <div class="parallax" data-speed=" | + | <div class="parallax" data-speed="1000" data-dist="120" style="left: 24%; top: 20%"> |
<h6>(Yeah I stole the background) </h6> | <h6>(Yeah I stole the background) </h6> | ||
</div> | </div> | ||
| - | <div class="parallax" data-speed=" | + | <div class="parallax" data-speed="1000" data-dist="100" style="left: 58%; top: 50%"> |
<h2> Use the arrow keys to navigate --> </h2> | <h2> Use the arrow keys to navigate --> </h2> | ||
</div> | </div> | ||
</div> | </div> | ||
<!-- Screen 2 --> | <!-- Screen 2 --> | ||
| - | <div id="second-last-screen" class="screen" data-speed=" | + | <div id="second-last-screen" class="screen" data-speed="500" data-dist="100" style="top: -100%; left: 100%"> |
| - | <div class="parallax" data-speed="100" style="left: 30%; top: 25%;"> | + | <div class="parallax" data-speed="1000" data-dist="100" style="left: 30%; top: 25%;"> |
<h2> These pages can replace sliders </h2> | <h2> These pages can replace sliders </h2> | ||
</div> | </div> | ||
| - | <div class="parallax" data-speed=" | + | <div class="parallax" data-speed="1000" data-dist="110" style="left: 40%; top: 35%;"> |
<h4> And have pretty pictures that link to project pages </h2> | <h4> And have pretty pictures that link to project pages </h2> | ||
</div> | </div> | ||
| - | <div class="parallax" data-speed=" | + | <div class="parallax" data-speed="1000" data-dist="120" style="left: 34%; top: 45%;"> |
<h5> This means design will be really important </h2> | <h5> This means design will be really important </h2> | ||
</div> | </div> | ||
| - | <div class="parallax" data-speed=" | + | <div class="parallax" data-speed="1000" data-dist="130" style="left: 34%; top: 65%;"> |
<h5> It also takes a ton of time to set the page up cause I have to position everything manually </h2> | <h5> It also takes a ton of time to set the page up cause I have to position everything manually </h2> | ||
</div> | </div> | ||
</div> | </div> | ||
<!-- Screen 3 --> | <!-- Screen 3 --> | ||
| - | <div class="screen" data-speed=" | + | <div class="screen" data-speed="500" data-dist="100" style="top: -200%; left: 200%"> |
| - | <div class="parallax" data-speed=" | + | <div class="parallax" data-speed="1000" data-dist="160" style="left: 10%;"> |
<h6> Whee! </h6> | <h6> Whee! </h6> | ||
</div> | </div> | ||
| - | <div class="parallax" data-speed="100" style="left: 50%; top: 50%"> | + | <div class="parallax" data-speed="1000" data-dist="100" style="left: 50%; top: 50%"> |
<h2> Yay! Parallax </h2> | <h2> Yay! Parallax </h2> | ||
</div> | </div> | ||
| - | <div class="parallax" data-speed=" | + | <div class="parallax" data-speed="1000" data-dist="130" style="left: 60%; top: 60%"> |
<h2> (Nupur's awesome) </h2> | <h2> (Nupur's awesome) </h2> | ||
</div> | </div> | ||
Revision as of 18:37, 1 January 2014
- Project
- Outreach
- Notebook
- Team
