Team:Heidelberg/js/frontpage
From 2014.igem.org
Line 18: | Line 18: | ||
$(document).ready(function(){ | $(document).ready(function(){ | ||
+ | controller = new ScrollMagic(); | ||
$("#ring").load(function(){ | $("#ring").load(function(){ | ||
recalcRingSize(true); | recalcRingSize(true); | ||
Line 24: | Line 25: | ||
skrollr.get().refresh(); | skrollr.get().refresh(); | ||
}); | }); | ||
- | var ringTween = new TweenMax("#ring", 0.5, { rotation: 360, left: -200, top: 600}); | + | |
- | + | var ringTween = new TweenMax("#ring", 0.5, { rotation: 360, left: -200, top: 600, paused: true}); | |
+ | |||
+ | var scene = new ScrollScene({triggerElement: "#ring", duration: 300}) | ||
+ | .setTween(ringTween) | ||
+ | .addTo(controller); | ||
skrollr.init(); | skrollr.init(); | ||
}); | }); |
Revision as of 09:21, 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.attr("data-start", "transform:rotate(0deg); left:"+position.left+"px; top:"+position.top+"px"); ring.css("width", width+"px"); placeholder.css("height", ring.height()+"px");
var endtop = $('.second').offset().top + 10; ring.attr("data-300", "transform:rotate(180deg); left:-260px; top:"+endtop+"px"); ring.attr("data-500", "transform:rotate(360deg);"); };
$(document).ready(function(){
controller = new ScrollMagic(); $("#ring").load(function(){ recalcRingSize(true); $("#img-placeholder img").css("display", "none"); $("#ring").css("visibility", ""); skrollr.get().refresh(); }); var ringTween = new TweenMax("#ring", 0.5, { rotation: 360, left: -200, top: 600, paused: true}); var scene = new ScrollScene({triggerElement: "#ring", duration: 300})
.setTween(ringTween) .addTo(controller);
skrollr.init();
});
$( window ).resize(function() { recalcRingSize(false); skrollr.get().refresh(); });