Search code examples
jquerymathparallax

Animating a kangaroo along cosine wave on page scroll

I am trying to animate a kangaroo jumping along a sine wave on page scroll but having been out of school for almost 15yrs am unable to workout the math I need to make this happen. I have got somewhere close in my attempt below, but it looks like the Kangaroo is having an epileptic fit and jumps up and down all over the place.

Here is my CSS

.bgRoo{
    position: fixed; 
    background: url(../images/bg-roo.png) no-repeat; 
    width: 225px; height: 239px; 
    left: 50%; margin-left: 250px; 
    border: red; margin-top: 400px;}

and my jQuery

$(window).bind('scroll',function(e){
        parallaxScroll();
    });

    function parallaxScroll(){
        var scrolledY = $(window).scrollTop();
        $('.bgRoo').css('top',''+((Math.sin(scrolledY)*30)+(scrolledY*0.1))+'px');
        $('.bgRoo').css('margin-left',(250+scrolledY)+'px')
    }

Anyone care to take a go at this?

Solution

  • It's probablly because its a bit sensitive to scrolling changes.... maybe Math.sin(scrolledY) should be Math.sin(scrolledY/30) or so. the number (scrolledY) passed into Math.sin is in radians so .... every 6.28ish is a full sine wave. meaning currently every 6 pixels ish it's going through a full sine loop, meaning scrolling probablly looks pretty random.