I recently wrote a jQuery plugin to do some smooth scrolling on the iPad, and I thought I'd share the code with everyone.
The effect you get is very similar to the iOS home screen. The user touches the screen and drags to scroll. Releasing the screen causes it to spring to the most appropriate page based upon the last dragging position and speed.
Gurus of front end development tell us that pretty much the only way to get smooth transitions on the iPad is to use 3D CSS transforms. After experimenting with jQuery animations and 2D CSS transforms, I pretty much concur: jQuery animations yield one or two frames per second, and 2D CSS transforms aren't much better. Microsoft app installer. 3D CSS transforms, on the other hand, are hardware accelerated and smooth as silk.
This is the police (2016). Try using animated scroll effects in your next project! It's a nice way to gently guide users to specific parts of your web page that they'll surely appreciate 📜 Browser compatibility is solid across the board with the exclusion of Safari, however there's a popular polyfill available that will give you blanket coverage on major browsers. With Safari Auto Scroll you can read on the web hands-free. Choose an automatic scroll speed or define it yourself and read articles on the web without annoying manual scrolling. You also don't need to have your device under control, as is the case with alternate shortcuts that use the iOS device's gyroscope for automated scrolling. However, IE 11 and Safari do not support options, which mean even you have setup behavior: 'smooth', it would still instantly jump to that position. Mac pro late 2013 adobe premiere. That is not ideal for our smooth scroll, so.
You can get the code from this Gist on Github (contributions and enhancements welcome). Use it with the following HTML:
and the following Javascript:
Android Smooth Scroll
Ios Smooth Scroll
Mouse Scroll Not Smooth
There's a demo of it in action here. Internet speed test 3 0 3. Tagr 4 7 1. A couple of notes:
- Because this hooks into touch gesture events and CSS3 3D transforms, it'll pretty much only work on iDevices and possibly other Webkit-based tablets.
- It works horizontally and vertically, but I'd recommend only using it horizontally in a regular web page because it interferes with Safari's natural screen bounce. I had the benefit of a working on an offline brochure where the web page never scrolls naturally. In this environment the plugin really shines. If you are interested in doing something similar, take a look at the iPad app Delivery Site, which lets you customise various things like this.
- There are a couple of options you can tweak to affect things like dead-zones before a drag will trigger a page transition. See the top of the source code for details.
- When the first 3D transform is added to a page, Mobile Safari seems to transparently install an OpenGL panel to handle the effects. This causes a rendering glitch that's just faintly visible if you're paying attention. The plugin works around this by setting an identity transform on the scroll component on page load. Webkit is presumably frugal about 3D-ification for a reason, so you may find your web pages take more memory and CPU resources with this plugin active than without.
- Really large (read 'many-page, full-screen') scroll panes can be very heavy on the browser. This is presumably due to the overhead of creating a texture buffer to 3D accelerate the transitions. I've managed five-page full-screen scrolling transitions without problems, but your mileage may vary.
