Team:Cornell/sandbox/design1
From 2013.igem.org
(Difference between revisions)
(Created page with "<html> <head> <!-- Inspired by http://hotdot.pro/en/# --> <title> Parallax Test </title> <meta name="Description" content="2014 Parallax Down" /> <meta name="Keywords" ...") |
|||
(12 intermediate revisions not shown) | |||
Line 185: | Line 185: | ||
div.wrapper { | div.wrapper { | ||
margin: 0 204px; | margin: 0 204px; | ||
- | |||
- | |||
- | |||
- | |||
} | } | ||
Line 384: | Line 380: | ||
<!-- 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="parallax layer1" data-speed="110" style="left: 22%; padding-top: 7%"> | |
- | + | <h4> Inspired by this site ---> </h4> | |
- | + | </div> | |
- | + | <div class="parallax layer1" data-speed="125" style="left: 22%; padding-top: 15%;"> | |
- | <div class="parallax layer1" data-speed="110" style="left: 40%; padding-top: 6%"> | + | <h3> This version's not quite the same and still has some bugs </h3> |
- | + | </div> | |
- | + | <div class="parallax layer1" data-speed="110" style="left: 40%; padding-top: 6%"> | |
- | + | <a href="http://hotdot.pro/en/#" target="_blank"> <h1 style="color: #871414"> http://hotdot.pro/en/# </h1> </a> | |
- | + | </div> | |
- | + | <div class="parallax layer1" data-speed="115" style="left: 24%; padding-top: 10%"> | |
- | + | <h6>(Yeah I stole the background) </h6> | |
- | + | </div> | |
- | + | <div class="parallax layer1" data-speed="110" style="left: 58%; padding-top: 26%"> | |
+ | <h2> Use the arrow keys to navigate --> </h2> | ||
</div> | </div> | ||
<!-- Screen 2 --> | <!-- Screen 2 --> | ||
- | + | <div id="second-last-screen" class="parallax layer1" data-speed="100" style="left: 130%; padding-top: 4%;"> | |
- | + | <h2> These pages can replace sliders </h2> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</div> | </div> | ||
+ | <div class="parallax layer1" data-speed="130" style="left: 140%; padding-top: 10%;"> | ||
+ | <h4> And have pretty pictures that link to project pages </h2> | ||
+ | </div> | ||
+ | <div class="parallax layer1" data-speed="125" style="left: 134%; padding-top: 15%;"> | ||
+ | <h5> This means design will be really important </h2> | ||
+ | </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%;"> | |
- | + | <h6> Whee! </h6> | |
- | + | </div> | |
- | + | <div class="parallax layer1" data-speed="100" style="left: 250%; padding-top: 10%"> | |
- | + | <h2> Yay! Parallax </h2> | |
- | + | </div> | |
- | + | <div class="parallax layer1" data-speed="100" style="left: 270%; padding-top: 25%"> | |
- | + | <h2> (Nupur's awesome) </h2> | |
- | + | </div> | |
- | </div> | + | <!-- <div class="parallax layer2" data-speed="100" style="left: 200%;"> |
+ | <img src="http://testing.worldaccordingtorobert.com/jquery/jparallax/images/03_wood.png"> | ||
+ | </div> | ||
+ | <div class="parallax layer3" data-speed="120" style="left: 200%;"> | ||
+ | <img src="http://testing.worldaccordingtorobert.com/jquery/jparallax/images/02_hill.png"> | ||
</div> | </div> | ||
+ | <div class="parallax layer4" data-speed="140" style="left: 200%;"> | ||
+ | <img src="http://testing.worldaccordingtorobert.com/jquery/jparallax/images/01_mountains.png"> | ||
+ | </div> --> | ||
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> |
Latest revision as of 04:23, 31 December 2013