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:
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.