Team:Cornell/sandbox

From 2013.igem.org

(Difference between revisions)
Line 327: Line 327:
//down or right
//down or right
if (e.which == 40 || e.which == 39) {  
if (e.which == 40 || e.which == 39) {  
-
if($("#far-right").css('left') > '100%') { //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
-
alert($("#far-right").css('left'));
+
$(".parallax").each(function() {
$(".parallax").each(function() {
var speed = 10 * parseInt($(this).data('speed'), 10);
var speed = 10 * parseInt($(this).data('speed'), 10);
Line 340: Line 339:
//up or left
//up or left
else if(e.which == 38 || e.which == 37) {
else if(e.which == 38 || e.which == 37) {
-
if($("#far-left").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() {
$(".parallax").each(function() {
var speed = 10 * parseInt($(this).data('speed'), 10);
var speed = 10 * parseInt($(this).data('speed'), 10);
Line 374: Line 373:
</header>
</header>
<!-- Screen 1 -->
<!-- Screen 1 -->
 +
<div id="first-screen" class="parallax" data-speed="100" style="left: 50%;">
 +
<img src="https://static.igem.org/mediawiki/igem.org/6/67/IGEMsmall.png">
 +
</div>
<div class="parallax" data-speed="105" style="left: 150%;">
<div class="parallax" data-speed="105" style="left: 150%;">
<h2> Project </h2>
<h2> Project </h2>
</div>
</div>
-
<div id="far-right" class="parallax" data-speed="100" style="left: 150%; padding-top: 100px">
+
<div id="second-last-screen" class="parallax" data-speed="100" style="left: 150%; padding-top: 100px">
<img src="https://static.igem.org/mediawiki/igem.org/6/67/IGEMsmall.png">
<img src="https://static.igem.org/mediawiki/igem.org/6/67/IGEMsmall.png">
</div>
</div>
-
<div id="far-left" class="parallax" data-speed="100" style="left: 50%;">
+
<div class="parallax" data-speed="110" style="left: 250%;">
-
<img src="https://static.igem.org/mediawiki/igem.org/6/67/IGEMsmall.png">
+
<h2> These can replace sliders </h2>
 +
</div>
 +
<div class="parallax" data-speed="120" style="left: 270%; padding-top: 100px;">
 +
<h2> And have pretty pictures that link to project pages </h2>
 +
</div>
 +
<div class="parallax" data-speed="119" style="left: 230%; padding-top: 200px;">
 +
<h2> This means design will be really important </h2>
</div>
</div>
-
 
</div>
</div>
</body>
</body>
</html>
</html>

Revision as of 02:20, 30 December 2013

Parallax Test

Whee

Project

These can replace sliders

And have pretty pictures that link to project pages

This means design will be really important

Retrieved from "http://2013.igem.org/Team:Cornell/sandbox"