image - jQuery item fly in an U shape -
is there way make element fly in upside down u shape through screen , rotate continuously? i'm working on script , need create effect: image appears bottom left corner of screen, go 50% of screen's height , fall through right corner of screen. need every 1 minute, can setinterval.
what i've done:
var currwidth = $(window).width(); console.log(currwidth); var startpos = -100; var endpos = (currwidth + 100) + (startpos / 2); console.log(endpos); setinterval( function(){ $('.bouquet').animate({left: endpos}, 3000); var offset = $(e.target).offset(); $('.bouquet').animate({'top':offset.top},600); }, 10000 );
but goes left of screen right, not work ok.
well, won't easy. you'll need 2 animations @ once, like
//first half of motion settimeout(function(){ $('.bouquet').animate({left: endpos/2}, 3000,'<easing>'); },0); settimeout($('.bouquet').animate({top:offset.top}, 3000,'<easing>',function(){ //on complete: other half of motion settimeout(function(){ $('.bouquet').animate({left: endpos}, 3000,'<easing>'); },0); settimeout(function(){ $('.bouquet').animate({top:offset.top}, 3000,'<easing>' }),0) }),0)
with easing function provides quadratic function left-right motion , linear 1 up-down motion. else line...but i'm not sure easings these are, may add that. 2 settimeout
functions should not block, , both animations should happen @ same time
[edit] ...okay, tried , seems impossible multiple animations on 1 object @ same time. came possible solution:
it's not perfect yet, if play bit it, might you.
Comments
Post a Comment