css - Use scroll bar as timeline for an animation in jquery -


i'm trying animate element (an svg) when scroll, far triggered animation while scrolling, want scroll act "timeline", when scroll animation starts, if stop scrolling animation pauses, , if go animation goes backwards. guess parallax scroll.

i know there plugins out there solves problem, since have time wondering if posible jquery.

so question is: there way plain jquery?

this looks along same lines of you're looking for:

jquery/javascript opacity animation scroll

the fiddle in example uses scroll position control opacity, feel largely same animation control:

http://jsfiddle.net/z7e9u/1/

var fadestart=100 // 100px scroll or less equiv 1 opacity     ,fadeuntil=200 // 200px scroll or more equiv 0 opacity     ,fading = $('#fading') ;  $(window).bind('scroll', function(){     var offset = $(document).scrolltop()         ,opacity=0     ;     if( offset<=fadestart ){         opacity=1;     }else if( offset<=fadeuntil ){         opacity=1-offset/fadeuntil;     }     fading.css('opacity',opacity).html(opacity); }); 

granted if share code might able better. right have vague question idea rough answers fit explained problem. show code when asking questions if possible.


Popular posts from this blog