Javascript - Smooth parallax scrolling with mouse wheel

user_73715 0
Viewed 44882

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?

smooth-scrolling parallax scroll css javascript
6 Answers

I know I'm late to the game but I was researching the topic of smooth scrolling today after I stumbled on I Love me Wellness' site. Analyzing the sites JavaScript I found that they are using a vanillaJS script called Luxy.js which is showcased at Luxy.js on GitHub. I find the effect rather pleasing. I don't think it's a very bad idea if implemented well. And it's very easy to implement.

user_147596170
Related