Javascript - Smooth parallax scrolling with mouse wheel

Question

I have a page where I'm applying a parallax effect. This is accomplished using translate3d. Now, while this works well, I'm wondering how I can override the default "steps" when scrolling with the mouse wheel?

If I scroll with the scrollbars, everything is fine. But with the mouse wheel, it's all jumpy.

I'm doing this in a pretty straight forward way:

    var prefix = Modernizr.prefixed('transform');
    $window.on('scroll', function(){
        var scroll_top = $window.scrollTop();
        if(scroll_top < forside_infographics_offset){
            $_('#slider').css(prefix , "translate3d(0,"+(scroll_top/3)+"px,0)");
        }

    });

Now, I've seen this site where the scrolling is super smooth, also with a mouse wheel with steps on it. I've tried to look at the code, and he's using requestAnimationFrame is seems, but how he accomplish this excact scrolling effect, I'm not sure.

http://cirkateater.no/

Any ideas?

Answer 1

After doing a lot of research, I found a pretty easy solution :) http://bassta.bg/demos/smooth-page-scroll/

Interestingly enough, I didn't have to alter my existing code at all. This overrides the default scroll behaviour, while leaving the event open for me to use like I would normally do.

EDIT: This is a really bad idea. Never ever hijack and override expected behavior. I guess I was overly fascinated with animations back then and overdid everything. Thankfully we all learn and expand our perceptions of good UX principles :)

Answer 2

Scrolling using the mouse wheel requires special handling. Reason being each mouse wheel scroll doesn't scroll the content by a certain amount of pixels. Each scroll causes your page to jump and then each jump results in the "jumpy" jittery animation as the background image is trying to position itself at these jumps.

Using a library will solve the problem most of the time, but it is also worth understanding what problems it is trying to solve under the hood.

Just for reference sakes, the mouse events are mousewheel and DOMMouseScroll