Team:Heidelberg/js/frontpage
From 2014.igem.org
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();
TweenMax.to('#scrollNag', 2, {opacity:1, repeat: -1, yoyo: true});
});
$( 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;
});