Team:UT-Dallas

From 2014.igem.org

(Difference between revisions)
Line 6: Line 6:
<div id="content_body">
<div id="content_body">
<section id="titlechart">
<section id="titlechart">
-
<div id="top_bar">jeht;aerht</div>
+
<div id="top_bar">
 +
<h2>UT Dallas iGEM</h2>
 +
<ul id="navlist">
 +
<li id="active"><a href="#" id="current">Item one</a></li>
 +
<li><a href="#">Item two</a></li>
 +
<li><a href="#">Item three</a></li>
 +
<li><a href="#">Item four</a></li>
 +
<li><a href="#">Item five</a></li>
 +
</ul>
 +
</div>
</section>
</section>
<section class="demo">
<section class="demo">
Line 28: Line 37:
<div id="parallax3" class="spacer s5" style="background-image: url(https://static.igem.org/mediawiki/2014/b/b8/Team.jpg);"></div>
<div id="parallax3" class="spacer s5" style="background-image: url(https://static.igem.org/mediawiki/2014/b/b8/Team.jpg);"></div>
<div class="spacer s2"></div>
<div class="spacer s2"></div>
-
<script src="https://2014.igem.org/Team:UT-Dallas/general.js?action=raw&ctype=text/javascript"></script>
+
<script>
 +
$(document).ready(function($) {
 +
// define params
 +
var duration = $("#parallax1").height() + $(window).height();
 +
var bgPosMovement = "0 " + (duration*0.8) + "px";
 +
 
 +
// init controller
 +
var controller = new ScrollMagic({globalSceneOptions: {triggerHook: "onEnter", duration: duration}});
 +
 
 +
// build scenes
 +
new ScrollScene({triggerElement: "#trigger1"})
 +
.setTween(TweenMax.to("#parallax1", 1, {backgroundPosition: bgPosMovement, ease: Linear.easeNone}))
 +
.addTo(controller);
 +
 
 +
new ScrollScene({triggerElement: "#trigger2"})
 +
.setTween(TweenMax.to("#parallax2", 1, {backgroundPosition: bgPosMovement, ease: Linear.easeNone}))
 +
.addTo(controller);
 +
 
 +
new ScrollScene({triggerElement: "#trigger3"})
 +
.setTween(TweenMax.to("#parallax3", 1, {backgroundPosition: bgPosMovement, ease: Linear.easeNone}))
 +
.addTo(controller);
 +
 +
//this is the floating content
 +
var $floatingbox = $('#top_bar');
 +
 
 +
if ($('#content_body').length > 0)
 +
{
 +
 
 +
var bodyY = parseInt($('#content_body').offset().top) - 20;
 +
var originalX = $floatingbox.css('margin-left');
 +
$(window).scroll(function() {
 +
var scrollY = $(window).scrollTop();
 +
var isfixed = $floatingbox.css('position') == 'fixed';
 +
if ($floatingbox.length > 0) {
 +
$floatingbox.html("srollY : " + scrollY + ", bodyY : " + bodyY + ", isfixed : " + isfixed);
 +
if (scrollY > bodyY && !isfixed) {
 +
$floatingbox.stop().css({
 +
position: 'fixed',
 +
left: '50%',
 +
top: 20,
 +
marginLeft: -500
 +
});
 +
} else if (scrollY < bodyY && isfixed) {
 +
$floatingbox.css({
 +
position: 'relative',
 +
left: 0,
 +
top: 0,
 +
marginLeft: originalX
 +
});
 +
}
 +
}
 +
});
 +
}
 +
});
 +
</script>
</section>
</section>
</div>
</div>
</html>
</html>

Revision as of 19:46, 17 October 2014

Content 1

view source

Content 2

view source

Retrieved from "http://2014.igem.org/Team:UT-Dallas"