Team:Heidelberg/js/frontpage

From 2014.igem.org

(Difference between revisions)
Line 13: Line 13:
};
};
 +
 +
function setTweenParams(tween) {
 +
  var params = {
 +
    left: $('#ring').width()/-2,
 +
    top: $('.second').position().top + ($('.second').outerHeight() - $('#ring').height())/2
 +
  }
 +
  tween.updateTo(params, false);
 +
}
 +
 +
var moveRing = new TweenMax("#ring", 2, {});
$(document).ready(function(){
$(document).ready(function(){
   controller = new ScrollMagic();
   controller = new ScrollMagic();
   var tl = new TimelineMax();
   var tl = new TimelineMax();
 +
  tl.add(moveRing, 0);
   $("#ring").load(function(){
   $("#ring").load(function(){
-
    function getLeft(){
 
-
      return $('#ring').width()/-2;
 
-
    }
 
-
    function getTop() {
 
-
      return $('.second').position().top + ($('.second').outerHeight() - $('#ring').height())/2;
 
-
    }
 
     recalcRingSize(true);
     recalcRingSize(true);
     $("#img-placeholder img").css("display", "none");
     $("#img-placeholder img").css("display", "none");
     $("#ring").css("visibility", "");
     $("#ring").css("visibility", "");
-
      tl.to("#ring", 2, {
+
     tl.to("#ring", 4, { rotation: 360}, 0);
-
      left: getLeft,
+
-
      top: getTop
+
-
     },
+
-
  0);
+
-
 
+
-
  tl.to("#ring", 4, { rotation: 360}, 0);
+
-
 
+
   });
   });
-
  var animtop = ($('.second').position().top - $('#ring').position().top)/2;
 
   var scene = new ScrollScene({duration: 1000})
   var scene = new ScrollScene({duration: 1000})
-
  .setTween(tl)
+
    .setTween(tl)
-
  .addTo(controller);
+
    .addTo(controller);
   scene.addIndicators();
   scene.addIndicators();
});
});
Line 46: Line 43:
$( window ).resize(function() {
$( window ).resize(function() {
   recalcRingSize(false);
   recalcRingSize(false);
 +
  setTweenParams(moveRing);
});
});

Revision as of 13:28, 23 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");

};


function setTweenParams(tween) { 

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

}

var moveRing = new TweenMax("#ring", 2, {});

$(document).ready(function(){ 

 controller = new ScrollMagic();
 var tl = new TimelineMax();
 tl.add(moveRing, 0);
 $("#ring").load(function(){
   recalcRingSize(true);
   $("#img-placeholder img").css("display", "none");
   $("#ring").css("visibility", "");
   tl.to("#ring", 4, { rotation: 360}, 0);
 });

 var scene = new ScrollScene({duration: 1000})
   .setTween(tl)
   .addTo(controller);
 scene.addIndicators();

});

$( window ).resize(function() { 

 recalcRingSize(false);
 setTweenParams(moveRing);

});


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 = $(document).height() - $(window).height(), $scrollTop = $(window).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 / 60;
 wheel = true;

 $scrollTop = Math.min($docH, Math.max(0, parseInt($scrollTop - delta * 30)));
 $(true ? 'body' : 'html').stop().animate({
   scrollTop: $scrollTop + 'px'
 }, 2000, 'easeOutQuint', function() {
   wheel = false;
 });
 return false;

});

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