Team:Heidelberg/js/frontpage
From 2014.igem.org
(Difference between revisions)
m |
|||
(86 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
+ | var params; | ||
+ | |||
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("width", width+"px"); | + | ring.css("width", width+"px"); |
- | placeholder.css("height", ring.height()+"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('<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(){ | ||
+ | /* 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, { | 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; | |
+ | } | ||
}); | }); | ||
- | var wheel = 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, $scrollTop; | ||
+ | |||
+ | function updateScrollVars(){ | ||
+ | $docH = $(document).outerHeight() - $(window).height(), | ||
+ | $scrollTop = $(document).scrollTop(); | ||
+ | } | ||
+ | |||
$(window).bind('scroll', function() { | $(window).bind('scroll', function() { | ||
Line 30: | Line 190: | ||
$(document).bind('DOMMouseScroll mousewheel', function(e, delta) { | $(document).bind('DOMMouseScroll mousewheel', function(e, delta) { | ||
- | delta = delta || -e.originalEvent.detail / 3 || e.originalEvent.wheelDelta / | + | 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))); | ||
- | $( | + | console.log(delta, $scrollTop, $docH); |
+ | $(isWebkit ? 'body' : 'html').stop().animate({ | ||
scrollTop: $scrollTop + 'px' | scrollTop: $scrollTop + 'px' | ||
}, 2000, 'easeOutQuint', function() { | }, 2000, 'easeOutQuint', function() { | ||
Line 41: | Line 202: | ||
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('
- /