Team:Cornell/sandbox

From 2013.igem.org

(Difference between revisions)
Line 171: Line 171:
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
-
html { font-size: 62.5%; }
+
html { font-size: 62.5%; height: 100%;}
body {
body {
Line 180: Line 180:
-webkit-font-smoothing: antialiased;
-webkit-font-smoothing: antialiased;
background-image: url("http://hotdot.pro/static/img/bck.png");
background-image: url("http://hotdot.pro/static/img/bck.png");
 +
height: 100%;
overflow: hidden;
overflow: hidden;
}
}
Line 185: Line 186:
div.wrapper {
div.wrapper {
margin: 0 204px;
margin: 0 204px;
 +
height: 100%;
}
}
div.par-wrapper {
div.par-wrapper {
position: relative;
position: relative;
 +
height: 100%;
}
}
Line 384: Line 387:
<!-- 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 class="par-wrapper">
+
<div class="par-wrapper" >
<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>
Line 399: Line 402:
</div>
</div>
<!-- Screen 2 -->
<!-- Screen 2 -->
-
<div class="par-wrapper">
+
<div class="par-wrapper" style="left: 100%">
<div id="second-last-screen" class="parallax layer1" data-speed="100" style="left: 230%; padding-top: 4%;">
<div id="second-last-screen" class="parallax layer1" data-speed="100" style="left: 230%; 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: 240%; padding-top: 10%;">
<div class="parallax layer1" data-speed="130" style="left: 240%; padding-top: 10%;">
Line 408: Line 411:
<div class="parallax layer1" data-speed="125" style="left: 234%; padding-top: 15%;">
<div class="parallax layer1" data-speed="125" style="left: 234%; padding-top: 15%;">
<h5> This means design will be really important </h2>
<h5> This means design will be really important </h2>
 +
</div>
 +
<div class="parallax layer1" data-speed="125" style="left: 234%; padding-top: 45%;">
 +
<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="par-wrapper">
+
<div class="par-wrapper" style="left: 200%">
<div class="parallax layer1" data-speed="90" style="left: 108%;">
<div class="parallax layer1" data-speed="90" style="left: 108%;">
<h6> Whee! </h6>
<h6> Whee! </h6>

Revision as of 02:23, 31 December 2013

Parallax Test

Parallax Design 1

Inspired by this site --->

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"