Team:Heidelberg/js/frontpage

From 2014.igem.org

(Difference between revisions)
m
 
(66 intermediate revisions not shown)
Line 1: Line 1:
 +
var params;
 +
recalcRingSize = function(setPosition) {
recalcRingSize = function(setPosition) {
   var placeholder = $("#img-placeholder");
   var placeholder = $("#img-placeholder");
Line 13: Line 15:
};
};
-
 
+
var moveRing = false;
function setTweenParams(tween) {
function setTweenParams(tween) {
-
   var params = {css: {
+
   params = {css: {
     left: $('#ring').width()/-2,
     left: $('#ring').width()/-2,
     top: $('.second').position().top + ($('.second').outerHeight() - $('#ring').height())/2
     top: $('.second').position().top + ($('.second').outerHeight() - $('#ring').height())/2
-
   }}
+
   }};
-
  tween.invalidate();
+
   tween.updateTo(params, false);
-
   tween.updateTo(params, true);
+
}
}
-
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();
 +
 +
getDropdown = function(){
 +
  $dropdown = $(this).parent().children('.dropdown');//.clone();
 +
  //$dropdown.children('ul').prepend('<li><a href="'+$(this).attr("href")+'">Overview</a></li>');
 +
  return $dropdown.html();
 +
}
 +
 +
getTitle = function() {
 +
  $this = $(this)
 +
  return '<a href="'+$this.attr("href")+'" >'+$this.data("popover-title")+'</a>'
 +
}
 +
 +
var preload = [
 +
"/wiki/images/2/22/Heidelberg_Achievements_red.png",
 +
"/wiki/images/d/d3/Team_icon_red.png",
 +
"/wiki/images/3/3f/Science_icon_red.png",
 +
"/wiki/images/1/1d/Parts_icon_red.png",
 +
"/wiki/images/1/18/Software_icon_red.png",
 +
"/wiki/images/1/13/Modeling_icon_red.png",
 +
"/wiki/images/3/32/Toolbox_icon_red.png",
 +
"/wiki/images/3/3d/Humanpractice_icon_red.png",
 +
"/wiki/images/0/03/MD_icon_red.png"];
$(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){
 +
    $("#ring").load(function(){
 +
      recalcRingSize(true);
 +
      $("#img-placeholder img").css("display", "none");
 +
      $("#ring").css("visibility", "");
 +
      setTweenParams(moveRingTween);
 +
      timeline.add(moveRingTween, 0);
 +
      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
     .setTween(timeline)
     .setTween(timeline)
     .addTo(controller);
     .addTo(controller);
 +
  scene2 = new ScrollScene({duration: 10});
 +
  scene2.setTween(TweenMax.to("#front-nav ul", 2, { padding: "10px 20px"})).addTo(controller);
 +
  //scene.addIndicators();
 +
 +
  // Build Dropdowns and hovers
 +
 +
  $("#front-nav ul li a")
 +
    .on("mouseenter", function(){
 +
      $(this).find('img').animate({opacity: 0}, 200);
 +
    })
 +
    .on("mouseleave", function () {
 +
      $(this).find('img')
 +
      .stop(true, true)
 +
      .css("opacity", 1);
 +
    });
 +
 +
 +
  $("#front-nav ul li a.popover-dropdown")
 +
  .popover({trigger: 'manual', html: true, content: getDropdown, title: getTitle, placement: 'bottom'})
 +
  .on("mouseenter", function () {
 +
      var _this = this;
 +
      $(this).popover("show");
 +
      $(".popover").on("mouseleave", function () {
 +
          $(_this).popover('hide');
 +
      });
 +
      })
 +
  .on("mouseleave", function () {
 +
      var _this = this;
 +
      setTimeout(function () {
 +
          if (!$(".popover:hover").length) {
 +
              $(_this).popover("hide");
 +
          }
 +
      }, 100);
 +
  });
 +
 +
  $("#front-nav ul li a[data-toggle='tooltip']").tooltip();
 +
 +
  /*.mouseenter(function(){
 +
    $(this).find('img').animate({opacity: 0}, 200);
 +
    //$(this).siblings(".popover").stop(true);
 +
    $(this).popover('show');})
 +
  .mouseleave(function(){
 +
    $this = $(this)
 +
    $this.find('img').stop(true, true);
 +
    $this.find('img').css("opacity", 1);
 +
    $this.siblings(".popover")
 +
        .mouseenter(function() {$(this).siblings('a').data("hide", "false");})
 +
        .mouseleave(function() {$(this).siblings('a').popover('hide');});
 +
    $this.data("hide", "true");
 +
    setTimeout(function() {
 +
        if($this.data("hide") == "true")
 +
          $this.popover('hide');console.log($this.data("hide"));}, 200);
 +
  });*/
 +
  //updateScrollVars();
 +
 +
  TweenMax.to('#scrollNag', 2, {opacity:1, repeat: -1, yoyo: true});
 +
 +
  $('#scrollNag').click(function() {
 +
    $('body').scrollTo('#second', 1500, {easing: "easeInOutCubic"})
 +
  });
    
    
-
   scene.addIndicators();
+
   $(preload).each(function(){
 +
        $('<img/>')[0].src = this;
 +
        // Alternatively you could use:
 +
        // (new Image()).src = this;
 +
    });
});
});
$( window ).resize(function() {
$( window ).resize(function() {
-
   recalcRingSize(false);
+
   if ($('#placeholder-2').css('display') != "none")
-
   setTweenParams(moveRing);
+
    moveRing = true;
-
   console.log(moveRing);
+
   else
-
  scene.setTween(timeline);
+
    moveRing = false;
-
   console.log(timeline);
+
 
 +
   if(moveRing){
 +
    recalcRingSize(false);
 +
    setTweenParams(moveRingTween);
 +
    scene.setTween(timeline);
 +
   }
 +
  //updateScrollVars();
});
});
 +
//$(window).load(updateScrollVars);
 +
jQuery.extend(jQuery.easing, {
 +
easeInOutCubic: function (x, t, b, c, d) {
 +
    if ((t/=d/2) < 1) return c/2*t*t*t + b;
 +
    return c/2*((t-=2)*t*t + 2) + b;
 +
  }
 +
});
 +
 +
/*
jQuery.extend(jQuery.easing, {
jQuery.extend(jQuery.easing, {
   easeOutQuint: function(x, t, b, c, d) {
   easeOutQuint: function(x, t, b, c, d) {
Line 62: Line 175:
});
});
-
var wheel = false,
+
var wheel = false, $docH, $scrollTop;
-
$docH = $(document).height() - $(window).height(),
+
 
-
$scrollTop = $(window).scrollTop();
+
function updateScrollVars(){
 +
  $docH = $(document).outerHeight() - $(window).height(),
 +
  $scrollTop = $(document).scrollTop();
 +
}
 +
 
$(window).bind('scroll', function() {
$(window).bind('scroll', function() {
-
  if (wheel === false) {
+
    if (wheel === false) {
-
    $scrollTop = $(this).scrollTop();
+
        $scrollTop = $(this).scrollTop();
-
  }
+
    }
});
});
$(document).bind('DOMMouseScroll mousewheel', function(e, delta) {
$(document).bind('DOMMouseScroll mousewheel', function(e, delta) {
-
  delta = delta || -e.originalEvent.detail / 3 || e.originalEvent.wheelDelta / 60;
+
    delta = delta || -e.originalEvent.detail / 3 || e.originalEvent.wheelDelta / 120;
-
  wheel = true;
+
    wheel = true;
-
 
+
    var isWebkit = 'WebkitAppearance' in document.documentElement.style;
-
  $scrollTop = Math.min($docH, Math.max(0, parseInt($scrollTop - delta * 30)));
+
    $scrollTop = Math.min($docH, Math.max(0, parseInt($scrollTop - delta * 30)));
-
  $(true ? 'body' : 'html').stop().animate({
+
    console.log(delta, $scrollTop, $docH);
-
    scrollTop: $scrollTop + 'px'
+
    $(isWebkit ? 'body' : 'html').stop().animate({
-
  }, 2000, 'easeOutQuint', function() {
+
        scrollTop: $scrollTop + 'px'
-
    wheel = false;
+
    }, 2000, 'easeOutQuint', function() {
-
  });
+
        wheel = false;
-
  return false;
+
    });
 +
    return false;
});
});
 +
*/

Latest revision as of 00:28, 17 October 2014

var params;

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) { 

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

getDropdown = function(){ 

 $dropdown = $(this).parent().children('.dropdown');//.clone();
//$dropdown.children('ul').prepend('
  • <a href="'+$(this).attr("href")+'">Overview</a></li>'); return $dropdown.html(); } getTitle = function() { $this = $(this) return '<a href="'+$this.attr("href")+'" >'+$this.data("popover-title")+'</a>' } var preload = [ "/wiki/images/2/22/Heidelberg_Achievements_red.png", "/wiki/images/d/d3/Team_icon_red.png", "/wiki/images/3/3f/Science_icon_red.png", "/wiki/images/1/1d/Parts_icon_red.png", "/wiki/images/1/18/Software_icon_red.png", "/wiki/images/1/13/Modeling_icon_red.png", "/wiki/images/3/32/Toolbox_icon_red.png", "/wiki/images/3/3d/Humanpractice_icon_red.png", "/wiki/images/0/03/MD_icon_red.png"]; $(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){ $("#ring").load(function(){ recalcRingSize(true); $("#img-placeholder img").css("display", "none"); $("#ring").css("visibility", ""); setTweenParams(moveRingTween); timeline.add(moveRingTween, 0); 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(); // Build Dropdowns and hovers $("#front-nav ul li a") .on("mouseenter", function(){ $(this).find('img').animate({opacity: 0}, 200); }) .on("mouseleave", function () { $(this).find('img') .stop(true, true) .css("opacity", 1); }); $("#front-nav ul li a.popover-dropdown") .popover({trigger: 'manual', html: true, content: getDropdown, title: getTitle, placement: 'bottom'}) .on("mouseenter", function () { var _this = this; $(this).popover("show"); $(".popover").on("mouseleave", function () { $(_this).popover('hide'); }); }) .on("mouseleave", function () { var _this = this; setTimeout(function () { if (!$(".popover:hover").length) { $(_this).popover("hide"); } }, 100); }); $("#front-nav ul li a[data-toggle='tooltip']").tooltip(); /*.mouseenter(function(){ $(this).find('img').animate({opacity: 0}, 200); //$(this).siblings(".popover").stop(true); $(this).popover('show');}) .mouseleave(function(){ $this = $(this) $this.find('img').stop(true, true); $this.find('img').css("opacity", 1); $this.siblings(".popover") .mouseenter(function() {$(this).siblings('a').data("hide", "false");}) .mouseleave(function() {$(this).siblings('a').popover('hide');}); $this.data("hide", "true"); setTimeout(function() { if($this.data("hide") == "true") $this.popover('hide');console.log($this.data("hide"));}, 200); });*/ //updateScrollVars(); TweenMax.to('#scrollNag', 2, {opacity:1, repeat: -1, yoyo: true}); $('#scrollNag').click(function() { $('body').scrollTo('#second', 1500, {easing: "easeInOutCubic"}) }); $(preload).each(function(){ $('<img/>')[0].src = this; // Alternatively you could use: // (new Image()).src = this; }); }); $( window ).resize(function() { if ($('#placeholder-2').css('display') != "none") moveRing = true; else moveRing = false; if(moveRing){ recalcRingSize(false); setTweenParams(moveRingTween); scene.setTween(timeline); } //updateScrollVars(); }); //$(window).load(updateScrollVars); jQuery.extend(jQuery.easing, { easeInOutCubic: function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t*t + b; return c/2*((t-=2)*t*t + 2) + b; } }); /* 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))); console.log(delta, $scrollTop, $docH); $(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"