Team:Cornell/sandbox/design1
From 2013.igem.org
(Difference between revisions)
(9 intermediate revisions not shown) | |||
Line 347: | Line 347: | ||
$(".parallax").each(function() { | $(".parallax").each(function() { | ||
var speed = 10 * parseInt($(this).data('speed'), 10); | var speed = 10 * parseInt($(this).data('speed'), 10); | ||
- | $(this).animate( { left: '+= | + | $(this).animate( { left: '+=100%' }, speed); //move to the left |
}); | }); | ||
} | } | ||
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: | + | <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: | + | <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: | + | <!-- <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> | ||
- | <div class="parallax layer3" data-speed="120" style="left: | + | <div class="parallax layer3" data-speed="120" style="left: 200%;"> |
<img src="http://testing.worldaccordingtorobert.com/jquery/jparallax/images/02_hill.png"> | <img src="http://testing.worldaccordingtorobert.com/jquery/jparallax/images/02_hill.png"> | ||
</div> | </div> | ||
- | <div class="parallax layer4 data-speed="140" style="left: | + | <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