Close-up photograph of a violin scroll

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.