"
Team:Marburg/1
From 2013.igem.org
(Difference between revisions)
| Line 1,267: | Line 1,267: | ||
<script> | <script> | ||
$(document).ready(function() { | $(document).ready(function() { | ||
| + | // This example adds a duration to the tweens so they are synced to the scroll position | ||
| + | |||
var controller = $.superscrollorama(); | var controller = $.superscrollorama(); | ||
| + | |||
| + | // amount of scrolling over which the tween takes place (in pixels) | ||
| + | var scrollDuration = 200; | ||
| + | |||
// individual element tween examples | // individual element tween examples | ||
| - | controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}})); | + | controller.addTween('#fade-it', TweenMax.from( $('#fade-it'), .5, {css:{opacity: 0}}), scrollDuration); |
| - | controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .25, {css:{right:'1000px'}, ease:Quad.easeInOut})); | + | controller.addTween('#fly-it', TweenMax.from( $('#fly-it'), .25, {css:{right:'1000px'}, ease:Quad.easeInOut}), scrollDuration); |
| - | controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut})); | + | controller.addTween('#spin-it', TweenMax.from( $('#spin-it'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut}), scrollDuration); |
| - | controller.addTween('#scale-it', TweenMax.fromTo( $('#scale-it'), .25, {css:{opacity:0, fontSize:'20px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, fontSize:'240px'}, ease:Quad.easeInOut})); | + | controller.addTween('#scale-it', TweenMax.fromTo( $('#scale-it'), .25, {css:{opacity:0, fontSize:'20px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, fontSize:'240px'}, ease:Quad.easeInOut}), scrollDuration); |
| - | controller.addTween('#smush-it', TweenMax.fromTo( $('#smush-it'), .25, {css:{opacity:0, 'letter-spacing':'30px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, 'letter-spacing':'-10px'}, ease:Quad.easeInOut}), | + | controller.addTween('#smush-it', TweenMax.fromTo( $('#smush-it'), .25, {css:{opacity:0, 'letter-spacing':'30px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, 'letter-spacing':'-10px'}, ease:Quad.easeInOut}), scrollDuration); // 100 px offset for better timing |
}); | }); | ||
</script> | </script> | ||
</body></html> | </body></html> | ||
Revision as of 09:17, 4 March 2014
