Team:UT-Dallas/general.js

From 2014.igem.org

(Difference between revisions)
 
Line 26: Line 26:
// build scenes
// build scenes
-
new ScrollScene({triggerElement: "#trigger1"})
+
// new ScrollScene({triggerElement: "#trigger1"})
-
.setTween(TweenMax.to("#parallax1", 1, {backgroundPosition: bgPosMovement, ease: Linear.easeNone}))
+
// .setTween(TweenMax.to("#parallax1", 1, {backgroundPosition: bgPosMovement, ease: Linear.easeNone}))
-
.addTo(controller);
+
// .addTo(controller);
-
 
+
//
-
new ScrollScene({triggerElement: "#trigger2"})
+
// new ScrollScene({triggerElement: "#trigger2"})
-
.setTween(TweenMax.to("#parallax2", 1, {backgroundPosition: bgPosMovement, ease: Linear.easeNone}))
+
// .setTween(TweenMax.to("#parallax2", 1, {backgroundPosition: bgPosMovement, ease: Linear.easeNone}))
-
.addTo(controller);
+
// .addTo(controller);
-
 
+
//
-
new ScrollScene({triggerElement: "#trigger3"})
+
// new ScrollScene({triggerElement: "#trigger3"})
-
.setTween(TweenMax.to("#parallax3", 1, {backgroundPosition: bgPosMovement, ease: Linear.easeNone}))
+
// .setTween(TweenMax.to("#parallax3", 1, {backgroundPosition: bgPosMovement, ease: Linear.easeNone}))
-
.addTo(controller);
+
// .addTo(controller);
-
if ($('#trigger4').length)
+
for (var i=1;i<=10;i++)
{
{
-
new ScrollScene({triggerElement: "#trigger4"})
+
if ($('#trigger'+i).length)
-
.setTween(TweenMax.to("#parallax4", 1, {backgroundPosition: bgPosMovement, ease: Linear.easeNone}))
+
{
-
.addTo(controller);
+
new ScrollScene({triggerElement: "#trigger"+i})
 +
.setTween(TweenMax.to("#parallax"+i, 1, {backgroundPosition: bgPosMovement, ease: Linear.easeNone}))
 +
.addTo(controller);
 +
}
}
}
-
if ($('#trigger5').length)
+
-
{
+
-
new ScrollScene({triggerElement: "#trigger5"})
+
-
.setTween(TweenMax.to("#parallax5", 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');

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 }); } } }); } });