Team:Heidelberg/js/frontpage

From 2014.igem.org

(Difference between revisions)
Line 1: Line 1:
recalcRingSize = function(setPosition) {
recalcRingSize = function(setPosition) {
-
var placeholder = $("#img-placeholder");
+
  var placeholder = $("#img-placeholder");
-
var ring = $("#ring");
+
  var ring = $("#ring");
-
var width = placeholder.outerWidth(false);
+
  var width = placeholder.outerWidth(false);
-
var position = placeholder.offset();
+
  var position = placeholder.offset();
-
position.left = position.left - $(".container").offset().left;
+
  position.left = position.left - $(".container").offset().left;
-
if(setPosition){
+
  if(setPosition){
-
  ring.css(position);
+
    ring.css(position);
-
}
+
  }
-
ring.css("width", width+"px");
+
  ring.css("width", width+"px");
-
placeholder.css("height", ring.height()+"px");
+
  placeholder.css("height", ring.height()+"px");
};
};
-
jQuery.extend(jQuery.easing, {
+
getRingTop = function() {
-
    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() {
+
$(document).ready(function(){
-
     if (wheel === false) {
+
  controller = new ScrollMagic();
-
        $scrollTop = $(this).scrollTop();
+
  $("#ring").load(function(){
-
     }
+
     recalcRingSize(true);
 +
    $("#img-placeholder img").css("display", "none");
 +
    $("#ring").css("visibility", "");
 +
  });
 +
  var animtop = ($('.second').position().top - $('#ring').position().top)/2;
 +
  var tl = new TimelineMax();
 +
 
 +
  tl.to("#ring", 2, {  
 +
      left: function() {return $('#placeholder-2').width()/2;},
 +
      top: function() {return ($('.second').position().top - $('#ring').position().top)/2;}
 +
     },
 +
  0);
 +
 
 +
  tl.to("#ring", 4, { rotation: 360}, 0);
 +
 
 +
  var scene = new ScrollScene({duration: 1000})
 +
  .setTween(tl)
 +
  .addTo(controller);
 +
  scene.addIndicators();
});
});
-
$(document).bind('DOMMouseScroll mousewheel', function(e, delta) {
+
$( window ).resize(function() {
-
    delta = delta || -e.originalEvent.detail / 3 || e.originalEvent.wheelDelta / 60;
+
  recalcRingSize(false);
-
    wheel = true;
+
});
-
    $scrollTop = Math.min($docH, Math.max(0, parseInt($scrollTop - delta * 30)));
+
 
-
    $(true ? 'body' : 'html').stop().animate({
+
jQuery.extend(jQuery.easing, {
-
        scrollTop: $scrollTop + 'px'
+
  easeOutQuint: function(x, t, b, c, d) {
-
    }, 2000, 'easeOutQuint', function() {
+
    return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
-
        wheel = false;
+
  }
-
    });
+
-
    return false;
+
});
});
-
$(document).ready(function(){
+
var wheel = false,
-
  controller = new ScrollMagic();
+
$docH = $(document).height() - $(window).height(),
-
  $("#ring").load(function(){
+
$scrollTop = $(window).scrollTop();
-
      recalcRingSize(true);
+
-
      $("#img-placeholder img").css("display", "none");
+
-
      $("#ring").css("visibility", "");
+
-
      //skrollr.get().refresh();
+
-
  });
+
-
 
+
-
  var tl = new TimelineMax();
+
-
 
+
-
  tl.to("#ring", 2, { left: -200, top: 600}, 0);
+
-
  tl.to("#ring", 4, { rotation: 360}, 0);
+
-
 
+
-
  var scene = new ScrollScene({duration: 1000})
+
-
.setTween(tl)
+
-
.addTo(controller);
+
-
  scene.addIndicators();
+
-
  //skrollr.init();
+
$(window).bind('scroll', function() {
 +
  if (wheel === false) {
 +
    $scrollTop = $(this).scrollTop();
 +
  }
});
});
-
$( window ).resize(function() {
+
$(document).bind('DOMMouseScroll mousewheel', function(e, delta) {
-
recalcRingSize(false);
+
  delta = delta || -e.originalEvent.detail / 3 || e.originalEvent.wheelDelta / 60;
-
//skrollr.get().refresh();
+
  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;
});
});

Revision as of 12:26, 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");

};

getRingTop = function() {

}

$(document).ready(function(){ 

 controller = new ScrollMagic();
 $("#ring").load(function(){
   recalcRingSize(true);
   $("#img-placeholder img").css("display", "none");
   $("#ring").css("visibility", "");
 });
 var animtop = ($('.second').position().top - $('#ring').position().top)/2;
 var tl = new TimelineMax();

 tl.to("#ring", 2, { 
     left: function() {return $('#placeholder-2').width()/2;}, 
     top: function() {return ($('.second').position().top - $('#ring').position().top)/2;}
   }, 
 0);
 
 tl.to("#ring", 4, { rotation: 360}, 0);

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

});

$( window ).resize(function() { 

 recalcRingSize(false);

});


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"