Team:Cornell/sandbox

From 2013.igem.org

(Difference between revisions)
Line 335: Line 335:
//parallax
//parallax
-
$(document).delay(1000).keydown(function(e){
+
$(document).keydown(function(e){
//down or right
//down or right
if (e.which == 40 || e.which == 39) {  
if (e.which == 40 || e.which == 39) {  
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="500" data-dist="100">
+
<div id="first-screen" class="screen parallax" data-speed="500" data-dist="100">
<div class="parallax" data-speed="1000" data-dist="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>
Line 401: Line 401:
</div>
</div>
<!-- Screen 2 -->
<!-- Screen 2 -->
-
<div id="second-last-screen" class="screen" data-speed="500" data-dist="100" style="top: -100%; left: 100%">
+
<div id="second-last-screen" class="screen parallax" data-speed="500" data-dist="100" style="top: -100%; left: 100%">
<div class="parallax" data-speed="1000" data-dist="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>
Line 416: Line 416:
</div>
</div>
<!-- Screen 3 -->
<!-- Screen 3 -->
-
<div class="screen" data-speed="500" data-dist="100" style="top: -200%; left: 200%">
+
<div class="screen parallax" data-speed="500" data-dist="100" style="top: -200%; left: 200%">
<div class="parallax" data-speed="1000" data-dist="160" style="left: 10%;">
<div class="parallax" data-speed="1000" data-dist="160" style="left: 10%;">
<h6> Whee! </h6>
<h6> Whee! </h6>

Revision as of 18:40, 1 January 2014

Parallax Test

Parallax Design 1.2

Inspired by this site --->

(Yeah I stole the background)

Use the arrow keys to navigate -->

These pages can replace sliders

And have pretty pictures that link to project pages

This means design will be really important
It also takes a ton of time to set the page up cause I have to position everything manually
Whee!

Yay! Parallax

(Nupur's awesome)