"
Team:UT-Dallas/general.js
From 2014.igem.org
| (18 intermediate revisions not shown) | |||
| Line 1: | Line 1: | ||
| - | + | 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($) { | ||
| + | |||
| + | $('#navlist').dropit(); | ||
// define params | // define params | ||
| + | $('.tooltip').tooltipster({ | ||
| + | animation: 'grow', | ||
| + | touchDevices: false, | ||
| + | trigger: 'hover', | ||
| + | position: 'right', | ||
| + | maxWidth: 500, | ||
| + | contentAsHTML: true | ||
| + | }); | ||
var duration = $("#parallax1").height() + $(window).height(); | var duration = $("#parallax1").height() + $(window).height(); | ||
var bgPosMovement = "0 " + (duration*0.8) + "px"; | var bgPosMovement = "0 " + (duration*0.8) + "px"; | ||
| Line 8: | Line 26: | ||
// build scenes | // 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); | |
| + | for (var i=1;i<=10;i++) | ||
| + | { | ||
| + | if ($('#trigger'+i).length) | ||
| + | { | ||
| + | new ScrollScene({triggerElement: "#trigger"+i}) | ||
| + | .setTween(TweenMax.to("#parallax"+i, 1, {backgroundPosition: bgPosMovement, ease: Linear.easeNone})) | ||
| + | .addTo(controller); | ||
| + | } | ||
| + | } | ||
| + | |||
//this is the floating content | //this is the floating content | ||
var $floatingbox = $('#top_bar'); | var $floatingbox = $('#top_bar'); | ||
| Line 32: | Line 60: | ||
var isfixed = $floatingbox.css('position') == 'fixed'; | var isfixed = $floatingbox.css('position') == 'fixed'; | ||
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=50; | ||
| + | var bar_height=80; | ||
| + | if(scrollY>500) | ||
| + | { | ||
| + | op=100; | ||
| + | bar_height=50; | ||
| + | } | ||
| + | else | ||
| + | { | ||
| + | op=50+(scrollY*50)/500; | ||
| + | bar_height=80-(scrollY*30)/500; | ||
| + | } | ||
| + | //console.log(scrollY); | ||
| + | $floatingbox.css('background', convertHex('#000000',op)); | ||
| + | $floatingbox.css('height', bar_height); | ||
if (scrollY > bodyY && !isfixed) { | if (scrollY > bodyY && !isfixed) { | ||
$floatingbox.stop().css({ | $floatingbox.stop().css({ | ||
position: 'fixed', | position: 'fixed', | ||
left: 0, | left: 0, | ||
| - | top: | + | top: 0 |
}); | }); | ||
} else if (scrollY < bodyY && isfixed) { | } else if (scrollY < bodyY && isfixed) { | ||
Latest revision as of 02:16, 18 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($) {
$('#navlist').dropit(); // define params $('.tooltip').tooltipster({ animation: 'grow', touchDevices: false, trigger: 'hover', position: 'right', maxWidth: 500, contentAsHTML: true }); 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);
for (var i=1;i<=10;i++) { if ($('#trigger'+i).length) { new ScrollScene({triggerElement: "#trigger"+i}) .setTween(TweenMax.to("#parallax"+i, 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; var bar_height=80; if(scrollY>500) { op=100; bar_height=50; } else { op=50+(scrollY*50)/500; bar_height=80-(scrollY*30)/500; } //console.log(scrollY); $floatingbox.css('background', convertHex('#000000',op)); $floatingbox.css('height', bar_height); 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 }); } } }); } });
