4 ms·
Well, not exactly. You made the fatal UI mistake --and by fatal I mean absolutely unusable for a great % of users-- of tying your viewport scroll to a fixed in
by cnp 12y ago
Well, not exactly.
You made the fatal UI mistake --and by fatal I mean absolutely unusable for a great % of users-- of tying your viewport scroll to a fixed incremental +1 tick on the scroll wheel. If a user is using a MacBook touchpad, it's way, way, way faster than a user using a mouse or scroll-wheel, or any other custom scrolling device.
Here's an example of a site doing it the right way: http://www.spaceneedle.com http://www.spaceneedle.com
The key is to ALWAYS normalize your scroll, regardless of platform or device. Not only does it make your scroll values uniform, it provides a much smoother experience for the user.
The way this has been historically solved is to capture the mouse scroll tick, and then apply a multiplier on the expected result to induce easing, and then pipe that result into the scroll position of your container. All of this should take place within a requestAnimationFrame.
In JavaScript it's as simple as
position += (targetPosition – currentWindow.scrollTop) * easing // generally between 0 and 1
This classic inching equation is your friend!
If you were to revise your demo by implementing the above (about 5 minutes of work) it would look absolutely phenomenal.
- tlarkworthy 12y agoyes, the scrolling was unbearably slow on my computer (ubuntu + chrome). The cool thing about that space needle example was I could middle mouse button scroll with momentum too. The middle mouse button does nothing on the posters example, so that's another feature to add.
- jagger27 12y agoMiddle mouse button works fine in Firefox on Windows 7 for me.
- nevster 12y agoI was totally confused by that spaceneedle site at first. Didn't realise I needed to scroll up. And once I figured it out it was very jerky. Chrome improved things a bit but it was still kind of frustrating to use. Nice when it worked though!
- dhgamache 12y agoHi there. I developed the demo and this is basically exactly what I do...the only difference is apply a multiplier to slow it down. I mentioned in the Medium post about this I am traveling and unfortunately didn't have access to anything but my MacBook Pro and my girlfriend's Air. That said, seems like a common criticism is scroll speed is too slow, so by changing a couple small params, I halved all the scroll speeds. I might totally be missing something, but seems like the concern is just relationship of scroll to movement of objects which I define in a big object. That said, I am no JS whiz and might be doing it all wrong.
- cnp 12y agoRunning your scroll within requestAnimationFrame isn't what makes the scrolling smooth, its the scroll multiplier which does it, making sure that deltas (or changes) in the y-position are normalized down into what will eventually be a zero, but over time. By constantly updating the future scroll position by running in through the equation and then applying it to your container whenever the user scrolls, you'll achieve a nice ease, which can then be dispatched to each of your parallax layers. Here, I've just pushed an example to Github and Firebase. Feel free to check it out and let me know if you have any questions: https://smoothscroll.firebaseapp.com/ https://smoothscroll.firebaseapp.com/ https://github.com/damassi/smooth-scroll-example https://github.com/damassi/smooth-scroll-example