Smooth scrolling easing effect with mouse wheel

Question

I recently came across this website http://www.ascensionlatorre.com/home, and I love the way the mouse wheel scrolling works - the easing is very smooth.

I have been searching Google but I can't find anything similar.

Does anybody have any suggestions on how to replicate this effect with jQuery?

Solution 1

I recently came across this issue as well and I wasn't finding a lot of support for it, so I quickly forgot about the problem. A few months later I saw a better example of the smooth scrolling so I went in and dug around the JavaScript files they were using and I found that they were using a jQuery file called NiceScroll.

I believe this is what we've both been looking for- simple smooth scrolling for divs, iframes or whatever, much like the iOS scrolling.

http://areaaperta.com/nicescroll/

Solution 2

http://areaaperta.com/nicescroll/

that's definitely the script to check out. Although it adds a custom scroll bar, it's a good looking one that you can edit through css.

EDIT I had a working demo but have since removed it due to hosting and domain changes, sorry about that.

Solution 3

I have the same question you've asked. I visit the website you provided and I find out the answer!

They used jquery.mousewheel.js, and you can use Chrome's console to find the script. Just search 'mousewheel' and you can find a function called 'scroll'. The reason of the smooth scrolling is that they didn't use jquery's animate, but using javascript's setInternal to make it. You can learn from the code.

I believe you can make it.

Solution 4

Okay mate, i'll try helping on ur request with some material. I found this tutorial for myself, hope it will be useful for u too. This forms the basic of the site you are referring to: http://johnpolacek.github.com/scrollorama/

http://johnpolacek.github.com/scrolldeck.js/

Solution 5

I haven't dived into the code, but I suspect they're using CSS3 transitions.

transition: all 1s

On your element (vendor prefixed of course), will smooth out the animations from parallax effects.

It seems like they've overridden the scrollWheel behavior and made each tick go down the page by a determined amount. That's how I would approach this at least.

View more solutions

Comments

[idbranding]

First of all, thanks for your reply. Already found this website, the animation of the divs ain't the problem. the thing i love is the easing effect using your mousewheel. Any suggestions for that?

[idbranding]

Yes i know that example to, it doesn't support mousewheel easing

[DBUK]

Would like to know if you were successful in finding a solution? I too am looking for something similar and am having trouble finding solutions via Google.

[idbranding]

manos.malihu.gr/tuts/jquery_custom_scrollbar.html - This one comes most close

[Kamran Asgari]

It's just 10 lines of code, why anybody shoud include hundreds line of code ? here it is jsfiddle.net/7ZVb7/1383

[Kamran Asgari]

please check my fiddle also just 10 lines of code Also with Mobile Effect :) jsfiddle.net/7ZVb7/1383

[Dylan]

@CameronA - your jsfiddle example currently only scrolls down and not back up. Also I'm sure that there is better js files out there that could handle the nice scrolling with less lines of code, but this post is one year old today.

[Kamran Asgari]

that link edited by someone and got problem it's the correct one ;) jsfiddle.net/7ZVb7/1383

[Kamran Asgari]

I checked again, my link works fine, scroll up and down with ease effect and android effect

[Kamran Asgari]

I dont know why I checked On 3 computer, just check my Stack overflow profile, I include my own fb, send me a msg on facebook, and then I will send you an email for that example :)

[Dylan]

@CameronA hello again! This was bugging me why it wasn't working on my machine and I wanted to elaborate on the issues that I was having, after a little bit of testing it turns out that mWheels with an increment of 2+ (mine is set to 3) will trip it up when scrolling mid-animation and continue the current direction if the scrollDirection is changed. ex: if scrolling down then change to scrolling up while the animation is running it will continue to scroll down.

[Dylan]

Hey @CameronA, it's been a while and I just wanted to revisit your response to this answer with a video of what's going on with your code. The issue of the incorrect scroll direction still exists on the most recent chrome, safari, and firefox and I wanted to warn everyone against using it. i.imgur.com/h3CI4Yd.gif

[m-khonsari]

very simple and soft github.com/simov/simplr-smoothscroll/blob/master/lib/…

[Omar]

I don't think it's good practice to change the speed of the scroll except maybe through links, because it breaks the experience. Someone might hop on your site and wonder why is scrolling weird here.

[sporker]

People should note that many of these scroll-jacking scripts really make the site unusable for those that still use a mouse or trackball with "free scrolling". The site mentioned above has the scroll speed jacked up so high that I have to resort to keyboard arrows to navigate. Before hijacking a basic operation like scrolling, consider whether it is actually going to work across all common scenarios.

[Dylan]

Agreed, scroll easing has come a long way in 4 years, the above answer is likely out of date.

[Naren Verma]

Link is not working "Error establishing a database connection"