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
Easy Parallax Effects
Background Image Fade
Scroll-to-Focus Effect
Rotate Elements on Scroll
Background Reveal
Fixed Scrolling Disappearing Banner
Smooth Scroll to Target
CSS Scrolling Snap Points
Scroll Behind Blurred Navigation Bar
Custom Scrolling Element
Scrolling Background Video
Scrolling SVG Sunset
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.