Team:Cornell/sandbox

From 2013.igem.org

(Difference between revisions)
Line 193: Line 193:
}
}
-
div.content {
+
div.wrapper {
margin: 0 204px;
margin: 0 204px;
}
}
Line 285: Line 285:
.hide { display: none; }
.hide { display: none; }
.highlight { background: #ffff99; }
.highlight { background: #ffff99; }
 +
.absolute { position: absolute; }
#googlemap img, object, embed { max-width: none; }
#googlemap img, object, embed { max-width: none; }
Line 314: Line 315:
Parallax
Parallax
----------------------------------------- */
----------------------------------------- */
-
.parallax {
+
.parallax { position: absolute; left: 50% };
-
position: absolute;
+
.layer1 { z-index: 4; }
-
}
+
.layer2 { z-index: 3; }
-
.parallax img {
+
.layer3 { z-index: 2; }
-
max-height: 300px;
+
.layer4 { z-index: 1; }
-
}
+
-
screen2 {
 
-
left: 100%;
 
-
}
 
-
foreground { z-index: 3; }
 
-
midground { z-index: 2; }
 
-
background { z-index: 1; }
 
</style>
</style>
Line 336: Line 330:
function parallaxScroll(){
function parallaxScroll(){
var scrolled = $(window).scrollTop();
var scrolled = $(window).scrollTop();
-
$('#foreground').css('right',(0+(scrolled*.75))+'px');
+
$('.parallax').css('left', scrolled / $(this).data('speed')+'px');
-
$('#midground').css('right',(0+(scrolled*.5))+'px');
+
-
$('#background').css('right',(0+(scrolled*.25))+'px');
+
}
}
</script>
</script>
Line 356: Line 348:
</ul>
</ul>
</div>
</div>
 +
<!-- content -->
<!-- content -->
-
<div class="content">
+
<div class="wrapper">
<header>
<header>
<h1> Whee </h1>
<h1> Whee </h1>
</header>
</header>
-
<div class="parallax">
+
<!-- Screen 1 -->
-
<header>
+
<div class="parallax" data-speed="5">
-
<h2> Project </h2>
+
<h2> Project </h2>
-
</header>
+
-
<div> We did stuff </div>
+
</div>
</div>
-
<div class="parallax screen2">
+
<div class="parallax" data-speed="10">
-
<header>
+
<img src="https://static.igem.org/mediawiki/igem.org/6/67/IGEMsmall.png">
-
<h2> Notebook </h2>
+
-
</header>
+
-
<div> We wrote about stuff </div>
+
-
</div>
+
-
+
-
<!-- foreground -->
+
-
<div id="foreground" class="parallax">
+
-
<img id="bg-project" src="https://static.igem.org/mediawiki/2013/f/f7/Cornell_IMG_4699.jpg" alt="pipetting glove">
+
-
<img id="bg1-team" class="screen2" src="https://static.igem.org/mediawiki/2013/0/07/Luengvarinkul_oat.jpg" alt="Oat" >
+
-
</div>
+
-
+
-
<!-- midground -->
+
-
<div id="midground" class="parallax">
+
-
<img id="mid1" src="http://f6design.com/projects/parallax-scrolling/img/cloud-lg1.png" alt="Big cloud">
+
-
</div>
+
-
+
-
<!-- background -->
+
-
<div id="background" class="parallax">
+
-
<img id="back1" src="http://s8210.storage.proboards.com/5498210/i/XsOgTFwPEcw6_rDCXT56.jpg" alt="Eric's favorite fish">
+
</div>
</div>
 +
</div>
</div>
</body>
</body>
</html>
</html>

Revision as of 19:49, 26 December 2013

Parallax Test

Whee

Project

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