Team:Cornell/sandbox/design1

From 2013.igem.org

(Difference between revisions)
 
(8 intermediate revisions not shown)
Line 382: Line 382:
<div id="first-screen" class="parallax layer1" data-speed="110" style="left: 22%; padding-top: 7%">
<div id="first-screen" class="parallax layer1" data-speed="110" style="left: 22%; padding-top: 7%">
<h4> Inspired by this site ---> </h4>
<h4> Inspired by this site ---> </h4>
 +
</div>
 +
<div class="parallax layer1" data-speed="125" style="left: 22%; padding-top: 15%;">
 +
<h3> This version's not quite the same and still has some bugs </h3>
</div>
</div>
<div class="parallax layer1" data-speed="110" style="left: 40%; padding-top: 6%">
<div class="parallax layer1" data-speed="110" style="left: 40%; padding-top: 6%">
Line 394: Line 397:
<!-- Screen 2 -->
<!-- Screen 2 -->
<div id="second-last-screen" class="parallax layer1" data-speed="100" style="left: 130%; padding-top: 4%;">
<div id="second-last-screen" class="parallax layer1" data-speed="100" style="left: 130%; padding-top: 4%;">
-
<h2> These pages replace sliders </h2>
+
<h2> These pages can replace sliders </h2>
</div>
</div>
<div class="parallax layer1" data-speed="130" style="left: 140%; padding-top: 10%;">
<div class="parallax layer1" data-speed="130" style="left: 140%; padding-top: 10%;">
Line 402: Line 405:
<h5> This means design will be really important </h2>
<h5> This means design will be really important </h2>
</div>
</div>
 +
<div class="parallax layer1" data-speed="125" style="left: 134%; padding-top: 25%;">
 +
<h5> It also takes a ton of time to set the page up cause I have to position everything manually </h2>
 +
</div>
 +
<!-- Screen 3 -->
<!-- Screen 3 -->
<div class="parallax layer1" data-speed="90" style="left: 208%;">
<div class="parallax layer1" data-speed="90" style="left: 208%;">
<h6> Whee! </h6>
<h6> Whee! </h6>
</div>
</div>
-
<div class="parallax layer1" data-speed="100" style="left: 250%; padding-top: 100px">
+
<div class="parallax layer1" data-speed="100" style="left: 250%; padding-top: 10%">
<h2> Yay! Parallax </h2>
<h2> Yay! Parallax </h2>
</div>
</div>
-
<div class="parallax layer1" data-speed="100" style="left: 280%; padding-top: 500px">
+
<div class="parallax layer1" data-speed="100" style="left: 270%; padding-top: 25%">
<h2> (Nupur's awesome) </h2>
<h2> (Nupur's awesome) </h2>
</div>
</div>
-
<div class="parallax layer2" data-speed="100" style="left: 200%;">
+
<!-- <div class="parallax layer2" data-speed="100" style="left: 200%;">
<img src="http://testing.worldaccordingtorobert.com/jquery/jparallax/images/03_wood.png">
<img src="http://testing.worldaccordingtorobert.com/jquery/jparallax/images/03_wood.png">
</div>
</div>
Line 420: Line 427:
<div class="parallax layer4" data-speed="140" style="left: 200%;">
<div class="parallax layer4" data-speed="140" style="left: 200%;">
<img src="http://testing.worldaccordingtorobert.com/jquery/jparallax/images/01_mountains.png">
<img src="http://testing.worldaccordingtorobert.com/jquery/jparallax/images/01_mountains.png">
-
</div>
+
</div> -->
</div>
</div>
</body>
</body>
</html>
</html>

Latest revision as of 04:23, 31 December 2013

Parallax Test

Parallax Design 1

Inspired by this site --->

This version's not quite the same and still has some bugs

http://hotdot.pro/en/#

(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)

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