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.

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

Answer 3

This plugin for Chrome provides the functionality necessary for this. Someone created a gist with a minified version of it. It's from a pretty old version, but I think that's fine because, as I've checked, the latest version of the plugin adds too much stuff.

A couple things with that gist though:

• It checks if the browser is Chrome before initiating.
• It initiates automatically.
• It uses jQuery.

So I let myself create a version that addresses those points. Just add the script and call SmoothScroll.init() to start.

Answer 4

Edit: While testing I figured out this has a significant bug. While my version behaves (in my opinion) tremendously better than the original code, it unfortunately does not account for scrolling by other means (scroll bar/middle click and drag). Scrolling by one of these methods and then scrolling with the mouse wheel causes it to revert to wherever scroll location you were at when you last scrolled the mousewheel. I'll update when I develop a solution to this.

Kenny's referenced solution was a fine approach, but it's functionality drove me crazy. If you scroll the wheel quickly it wouldn't scroll much faster.

I improved it such that you scroll a given distance per click regardless of mouse wheel spin speed.

The reason his answer did not is because if you scroll the wheel a second time before the first animation is complete the new scroll to height is only the current scroll height plus however much it scrolls per wheel click. (So if scroll time is .5 seconds and you scroll a second time after .25 seconds then it will scroll 1.5 times the wheel scroll distance instead of 2 times that distance)

It's late at night, I hope that makes sense.

Regradless here's my code:

Required libraries

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>

Scroll code

<script>
    $(function(){   
        var $window = $(window)
        var $scoll = $('#page-container')
        var scrollTime = 0.5
        var scrollDistance = 120

        var scrollTop = $scoll.scrollTop()

        $window.on("mousewheel DOMMouseScroll", function(event){

            event.preventDefault()  

            var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3
            scrollTop = scrollTop - parseInt(delta*scrollDistance)
            scrollTop = Math.max(0, Math.min($scoll[0].scrollHeight, scrollTop))

            TweenMax.to($scoll, scrollTime, {
                scrollTo : { y: scrollTop, autoKill:true },
                    ease: Power1.easeOut,
                    overwrite: 5                            
                })

        })
    })
</script>

Answer 5

Great question.

The library I use is this one: https://github.com/cferdinandi/smooth-scroll

Simply include the smoothscroll.js file, and job done. The mouse-wheel will now smoothly easy down the page, rather than jumping down in chunks of pixels.

It really improves the look of parallax webpages.

Btw, for parallax images, I use this library:

https://github.com/pederan/Parallax-ImageScroll

It's really easy to add to a webpage, just remember to include and initialise this library at the bottom of your webpage, after your images and HTML.

(I didn't realise that this would make a difference, but it absolutely does !)