Smooth scrolling easing effect with mouse wheel [closed]

Asked 4/2, 2012 at 16:41 Answered 26/3, 2013 at 22:57

jquery scroll mousewheel parallax easing

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?

Cachucha answered 4/2, 2012 at 16:41 Comment(6)

There is a whole lot of stuff going on with that scrolling, with menu navigation according to the scrolling, sections appearing/disappearing at different times etc. so I think it is far to comprehensive for a SO question. Give it a try your self and come back to ask specific questions about things you get stuck on along the way. – Blackwood 4/2, 2012 at 16:48

Why the thumbs down? I asked a specific question, i was wondering how the mousewheel easing works. I'm here to learn, not to steal – Cachucha 4/2, 2012 at 16:54

The downvote is because I think the question is overly broad. There are a range of compontents involved in make their scrolling smooth, with overlapping content that slides apart as you scroll, customized scrollbar, smooth transitioning and so forth. Describing how to do all that with jQuery is to comprehensive for a single SO question. – Blackwood 4/2, 2012 at 17:4

Ok i got that, but the only thing i would like to know (put me in a direction) is the easing in the mousewheel, not all the other effects you metioned. – Cachucha 4/2, 2012 at 17:7

Possible duplicate: #5561214 – Planimeter 2/4, 2013 at 2:29

very simple and soft github.com/simov/simplr-smoothscroll/blob/master/lib/… – Claustral 19/4, 2015 at 5:12

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/

Virile answered 13/9, 2012 at 18:59 Comment(11)

It's just 10 lines of code, why anybody shoud include hundreds line of code ? here it is jsfiddle.net/7ZVb7/1383 – Rockefeller 7/9, 2013 at 6:40

@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. – Virile 13/9, 2013 at 15:22

that link edited by someone and got problem it's the correct one ;) jsfiddle.net/7ZVb7/1383 – Rockefeller 14/9, 2013 at 2:48

I checked again, my link works fine, scroll up and down with ease effect and android effect – Rockefeller 14/9, 2013 at 2:51

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 :) – Rockefeller 17/9, 2013 at 10:49

@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. – Virile 26/11, 2013 at 15:11

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 – Virile 20/2, 2015 at 16:9

very simple and soft github.com/simov/simplr-smoothscroll/blob/master/lib/… – Claustral 19/4, 2015 at 5:14

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. – Hurlee 7/2, 2017 at 16:40

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. – Sigismondo 26/5, 2017 at 23:45

Agreed, scroll easing has come a long way in 4 years, the above answer is likely out of date. – Virile 30/5, 2017 at 15:5

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.

Flin answered 2/2, 2013 at 20:34 Comment(1)

Link is not working "Error establishing a database connection" – Wenger 29/11, 2017 at 12:2

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/

Separable answered 4/2, 2012 at 17:14 Comment(5)

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? – Cachucha 4/2, 2012 at 17:20

Yes i know that example to, it doesn't support mousewheel easing – Cachucha 4/2, 2012 at 17:44

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. – Squat 9/5, 2012 at 12:32

manos.malihu.gr/tuts/jquery_custom_scrollbar.html - This one comes most close – Cachucha 10/5, 2012 at 7:47

please check my fiddle also just 10 lines of code Also with Mobile Effect :) jsfiddle.net/7ZVb7/1383 – Rockefeller 7/9, 2013 at 6:42

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.

Ileenileitis answered 11/9, 2012 at 13:16 Comment(0)

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.

Smoky answered 26/3, 2013 at 22:57 Comment(0)

Recommended topics

Hot tags