Team:Heidelberg/js/frontpage

From 2014.igem.org

(Difference between revisions)
Line 13: Line 13:
};
};
 +
var moveRing = false;
function setTweenParams(tween) {
function setTweenParams(tween) {
Line 22: Line 23:
}
}
-
var moveRing = new TweenMax("#ring", 2, {});
+
var moveRingTween = new TweenMax("#ring", 2, {});
var scene = new ScrollScene({duration: 1000});
var scene = new ScrollScene({duration: 1000});
var timeline = new TimelineMax();
var timeline = new TimelineMax();
$(document).ready(function(){
$(document).ready(function(){
-
   controller = new ScrollMagic();
+
   /* check if ring should be moved by visability of placholder */
-
   timeline.add(moveRing, 0);
+
   if ($('#placeholder-2').css('display') != "none"){
-
  $("#ring").load(function(){
+
     moveRing = true;
-
    recalcRingSize(true);
+
   }
-
    $("#img-placeholder img").css("display", "none");
+
-
     $("#ring").css("visibility", "");
+
-
    setTweenParams(moveRing);
+
-
    timeline.to("#ring", 4, { rotation: 360}, 0);
+
-
    scene.setTween(timeline);
+
-
   });
+
 +
  /* Animate ring movement */
 +
  controller = new ScrollMagic();
 +
  if(moveRing){
 +
    timeline.add(moveRingTween, 0);
 +
    $("#ring").load(function(){
 +
      recalcRingSize(true);
 +
      $("#img-placeholder img").css("display", "none");
 +
      $("#ring").css("visibility", "");
 +
      setTweenParams(moveRingTween);
 +
      timeline.to("#ring", 4, { rotation: 360}, 0);
 +
      scene.setTween(timeline);
 +
    });
 +
  }
 +
  else {
 +
    /* only rotate Ring, dont move it on small devices */
 +
    timeline.to("#placeholder", 4, { rotation: 360}, 0);
 +
  }
    
    
   scene
   scene
Line 52: Line 64:
     $(this).find('img').css("opacity", 1);
     $(this).find('img').css("opacity", 1);
   });
   });
 +
  updateScrollVars();
});
});
$( window ).resize(function() {
$( window ).resize(function() {
-
   recalcRingSize(false);
+
   if ($('#placeholder-2').css('display') != "none")
-
  setTweenParams(moveRing);
+
    moveRing = true;
-
  scene.setTween(timeline);
+
  else
 +
    moveRing = false;
 +
 
 +
  if(moveRing){
 +
    recalcRingSize(false);
 +
    setTweenParams(moveRingTween);
 +
    scene.setTween(timeline);
 +
  }
   updateScrollVars();
   updateScrollVars();
});
});

Revision as of 09:17, 26 September 2014

recalcRingSize = function(setPosition) { 

 var placeholder = $("#img-placeholder");
 var ring = $("#ring");
 var width = placeholder.outerWidth(false);
 var position = placeholder.offset();
 position.left = position.left - $(".container").offset().left;
 if(setPosition){
   ring.css(position);
 }
 ring.css("width", width+"px");
 placeholder.css("height", ring.height()+"px");

};

var moveRing = false;

function setTweenParams(tween) { 

 var params = {css: {
   left: $('#ring').width()/-2,
   top: $('.second').position().top + ($('.second').outerHeight() - $('#ring').height())/2
 }};
 tween.updateTo(params, false);

}

var moveRingTween = new TweenMax("#ring", 2, {}); var scene = new ScrollScene({duration: 1000}); var timeline = new TimelineMax();

$(document).ready(function(){ 

 /* check if ring should be moved by visability of placholder */
 if ($('#placeholder-2').css('display') != "none"){
   moveRing = true;
 }

 /* Animate ring movement */
 controller = new ScrollMagic();
 if(moveRing){
   timeline.add(moveRingTween, 0);
   $("#ring").load(function(){
     recalcRingSize(true);
     $("#img-placeholder img").css("display", "none");
     $("#ring").css("visibility", "");
     setTweenParams(moveRingTween);
     timeline.to("#ring", 4, { rotation: 360}, 0);
     scene.setTween(timeline);
   });
 }
 else {
   /* only rotate Ring, dont move it on small devices */
   timeline.to("#placeholder", 4, { rotation: 360}, 0);
 }
 
 scene
   .setTween(timeline)
   .addTo(controller);
 scene2 = new ScrollScene({duration: 10});
 scene2.setTween(TweenMax.to("#front-nav ul", 2, { padding: "10px 20px"})).addTo(controller);
 //scene.addIndicators();

 $("#front-nav ul li a").tooltip()
 $("#front-nav ul li a").mouseenter(function(){$(this).find('img').animate({opacity: 0}, 200);});
 $("#front-nav ul li a").mouseleave(function(){
   $(this).find('img').stop(true, true);
   $(this).find('img').css("opacity", 1);
 });
 updateScrollVars();

});

$( window ).resize(function() { 

 if ($('#placeholder-2').css('display') != "none")
   moveRing = true;
 else
   moveRing = false;

 if(moveRing){
   recalcRingSize(false);
   setTweenParams(moveRingTween);
   scene.setTween(timeline);
 }
 updateScrollVars();

});


jQuery.extend(jQuery.easing, { 

 easeOutQuint: function(x, t, b, c, d) {
   return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
 }

});

var wheel = false, $docH, $scrollTop;

function updateScrollVars(){ 

 $docH = $(document).outerHeight() - $(window).height(),
 $scrollTop = $(document).scrollTop();

}


$(window).bind('scroll', function() { 

   if (wheel === false) {
       $scrollTop = $(this).scrollTop();
   }

});

$(document).bind('DOMMouseScroll mousewheel', function(e, delta) { 

   delta = delta || -e.originalEvent.detail / 3 || e.originalEvent.wheelDelta / 120;
   wheel = true;
   var isWebkit = 'WebkitAppearance' in document.documentElement.style
   $scrollTop = Math.min($docH, Math.max(0, parseInt($scrollTop - delta * 30)));
   $(isWebkit ? 'body' : 'html').stop().animate({
       scrollTop: $scrollTop + 'px'
   }, 2000, 'easeOutQuint', function() {
       wheel = false;
   });
   return false;

});

Retrieved from "http://2014.igem.org/Team:Heidelberg/js/frontpage"