40

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?

DBUK
  • 1,373
  • 1
  • 23
  • 41
idbranding
  • 729
  • 3
  • 10
  • 15
  • 1
    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. – Christofer Eliasson Feb 04 '12 at 16:48
  • 9
    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 – idbranding Feb 04 '12 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. – Christofer Eliasson Feb 04 '12 at 17:04
  • 1
    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. – idbranding Feb 04 '12 at 17:07
  • Possible duplicate: http://stackoverflow.com/questions/5560714/how-to-enforce-a-smooth-scrolling-rule-for-mousewheel-jquery – Anderson Green Apr 02 '13 at 02:29
  • very simple and soft https://github.com/simov/simplr-smoothscroll/blob/master/lib/jquery.simplr.smoothscroll.js – m-khonsari Apr 19 '15 at 05:12

5 Answers5

24

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/

the Tin Man
  • 158,662
  • 42
  • 215
  • 303
Dylan
  • 711
  • 5
  • 21
  • 7
    It's just 10 lines of code, why anybody shoud include hundreds line of code ? here it is http://jsfiddle.net/7ZVb7/1383/ – zEn feeLo Sep 07 '13 at 06:40
  • 2
    @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. – Dylan Sep 13 '13 at 15:22
  • that link edited by someone and got problem it's the correct one ;) http://jsfiddle.net/7ZVb7/1383/ – zEn feeLo Sep 14 '13 at 02:48
  • I checked again, my link works fine, scroll up and down with ease effect and android effect – zEn feeLo Sep 14 '13 at 02: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 :) – zEn feeLo Sep 17 '13 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. – Dylan Nov 26 '13 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. http://i.imgur.com/h3CI4Yd.gif – Dylan Feb 20 '15 at 16:09
  • very simple and soft https://github.com/simov/simplr-smoothscroll/blob/master/lib/jquery.simplr.smoothscroll.js – m-khonsari Apr 19 '15 at 05: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. – Omar Feb 07 '17 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. – sporker May 26 '17 at 23:45
  • Agreed, scroll easing has come a long way in 4 years, the above answer is likely out of date. – Dylan May 30 '17 at 15:05
8

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.

hellojebus
  • 3,267
  • 1
  • 21
  • 23
5

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.

biegleux
  • 13,179
  • 11
  • 45
  • 52
Winters
  • 71
  • 1
  • 3
5

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/

Panshul
  • 956
  • 1
  • 10
  • 25
  • 1
    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 Feb 04 '12 at 17:20
  • 1
    Yes i know that example to, it doesn't support _mousewheel easing_ – idbranding Feb 04 '12 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. – DBUK May 09 '12 at 12:32
  • 2
    http://manos.malihu.gr/tuts/jquery_custom_scrollbar.html - This one comes most close – idbranding May 10 '12 at 07:47
  • please check my fiddle also just 10 lines of code Also with Mobile Effect :) http://jsfiddle.net/7ZVb7/1383/ – zEn feeLo Sep 07 '13 at 06:42
2

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.

eighteyes
  • 1,306
  • 1
  • 11
  • 18