css - 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 :)