"
Team:UT-Dallas/general.js
From 2014.igem.org
| Line 41: | Line 41: | ||
if ($floatingbox.length > 0) { | if ($floatingbox.length > 0) { | ||
//$floatingbox.html("srollY : " + scrollY + ", bodyY : " + bodyY + ", isfixed : " + isfixed); | //$floatingbox.html("srollY : " + scrollY + ", bodyY : " + bodyY + ", isfixed : " + isfixed); | ||
| - | var op= | + | var op=50; |
if(scrollY>500) | if(scrollY>500) | ||
op=100; | op=100; | ||
else | else | ||
| - | op=(scrollY* | + | op=50+(scrollY*500)/500; |
//console.log(scrollY); | //console.log(scrollY); | ||
$floatingbox.css('background', convertHex('#0000ff',op)); | $floatingbox.css('background', convertHex('#0000ff',op)); | ||
Revision as of 19:25, 17 October 2014
function convertHex(hex,opacity){
hex = hex.replace('#',);
r = parseInt(hex.substring(0,2), 16);
g = parseInt(hex.substring(2,4), 16);
b = parseInt(hex.substring(4,6), 16);
result = 'rgba('+r+','+g+','+b+','+opacity/100+')';
return result;
} $(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); var op=50; if(scrollY>500) op=100; else op=50+(scrollY*500)/500; //console.log(scrollY); $floatingbox.css('background', convertHex('#0000ff',op)); if (scrollY > bodyY && !isfixed) { $floatingbox.stop().css({ position: 'fixed', left: 0, top: 0 }); } else if (scrollY < bodyY && isfixed) { $floatingbox.css({ position: 'relative', left: 0, top: -10 }); } } }); } });
