Team:Heidelberg/js/frontpage
From 2014.igem.org
(Difference between revisions)
Line 19: | Line 19: | ||
top: $('.second').position().top + ($('.second').outerHeight() - $('#ring').height())/2 | top: $('.second').position().top + ($('.second').outerHeight() - $('#ring').height())/2 | ||
} | } | ||
- | tween.updateTo(params, | + | tween.invalidate(); |
+ | tween.updateTo(params, true); | ||
} | } | ||
var moveRing = new TweenMax("#ring", 2, {}); | var moveRing = new TweenMax("#ring", 2, {}); | ||
+ | var scene = new ScrollScene({duration: 1000}); | ||
+ | var timeline = new TimelineMax(); | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
controller = new ScrollMagic(); | controller = new ScrollMagic(); | ||
- | + | timeline.add(moveRing, 0); | |
- | + | ||
$("#ring").load(function(){ | $("#ring").load(function(){ | ||
recalcRingSize(true); | recalcRingSize(true); | ||
$("#img-placeholder img").css("display", "none"); | $("#img-placeholder img").css("display", "none"); | ||
$("#ring").css("visibility", ""); | $("#ring").css("visibility", ""); | ||
- | + | setTweenParams(moveRing); | |
+ | timeline.to("#ring", 4, { rotation: 360}, 0); | ||
+ | scene.setTween(timeline); | ||
}); | }); | ||
- | + | ||
- | .setTween( | + | scene |
+ | .setTween(timeline) | ||
.addTo(controller); | .addTo(controller); | ||
+ | |||
scene.addIndicators(); | scene.addIndicators(); | ||
}); | }); | ||
Line 44: | Line 50: | ||
recalcRingSize(false); | recalcRingSize(false); | ||
setTweenParams(moveRing); | setTweenParams(moveRing); | ||
+ | scene.setTween(timeline); | ||
}); | }); | ||
Revision as of 13:37, 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.invalidate(); tween.updateTo(params, true);
}
var moveRing = new TweenMax("#ring", 2, {}); var scene = new ScrollScene({duration: 1000}); var timeline = new TimelineMax();
$(document).ready(function(){
controller = new ScrollMagic(); timeline.add(moveRing, 0); $("#ring").load(function(){ recalcRingSize(true); $("#img-placeholder img").css("display", "none"); $("#ring").css("visibility", ""); setTweenParams(moveRing); timeline.to("#ring", 4, { rotation: 360}, 0); scene.setTween(timeline); });
scene .setTween(timeline) .addTo(controller); scene.addIndicators();
});
$( window ).resize(function() {
recalcRingSize(false); setTweenParams(moveRing); scene.setTween(timeline);
});
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;
});