Javascript - Smooth parallax scrolling with mouse wheel
Asked Answered
B

6

17

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?

Berberine answered 12/12, 2013 at 11:43 Comment(0)
B
19

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

Berberine answered 12/12, 2013 at 14:16 Comment(5)
Makes scrolling way too slow for meHybridism
that is a UI nightmare... I would recommend never hijacking the scroll event for tis sort of thing. Users expect one thing, you are doing another..Karttikeya
I know this is a pretty old answer but it can not be overstated how bad of an idea this is. Never mess with native functionality.Anatolio
this is glitchy is hellAmoebocyte
Hi guys, yeah things certainly change. I have no idea what I, or any other on my team figured it'd be a good idea to hijack and alter expected behavior. Whenever I go back to maintain one of these sites I'm immediately disgusted by the scroll behavior :pBerberine
T
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

Tempa answered 11/12, 2014 at 22:2 Comment(0)
H
1

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.

Hate answered 20/1, 2016 at 21:21 Comment(0)
W
0

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>
Weston answered 7/3, 2016 at 7:57 Comment(1)
If you wish to use the original code I would advise decreasing the animation time. It allowed you to scroll at a better pace, even if it did still have the "loss" in scroll distanceWeston
S
0

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 !)

Simonsimona answered 29/8, 2016 at 12:42 Comment(0)
C
0

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.

Came answered 24/5, 2021 at 22:6 Comment(2)
It's not an answer. Please add it to a comment.Phenetidine
I can’t @Nikita because I don’t have a 50 reputation :(Came

© 2022 - 2024 — McMap. All rights reserved.