Whenever elements are scrolled - typically the web page, but in principle any container element - we can capture and control the scroll event with JavaScript. Done poorly, this leads to “scroll-jacking” and vertigo-inducing motion effects. But done well, scroll effects can be an effective design technique.

Prerequisites: The JavaScript reading list to this point

Time: 3 hours

1. Easy Parallax Effects
2. Background Image Fade
3. Scroll-to-Focus Effect
4. Rotate Elements on Scroll
5. Background Reveal
6. Fixed Scrolling Disappearing Banner
7. Smooth Scroll to Target
8. CSS Scrolling Snap Points
9. Scroll Behind Blurred Navigation Bar
10. Custom Scrolling Element
11. Scrolling Background Video
12. Scrolling SVG Sunset
13. Parallax Image Scrolling Animation

Photograph by Steven Snodgrass, used under a Creative Commons Generic 2.0 license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.