You are here: Home / Freebies For Websites / Demos & Snippets

Image Switch On-Scroll Demo

This is related to the very basic demo that adds a class to an element when it scrolls to an arbitrary distance from the top of the viewport.

Here, the addition of a class reveals a hidden image, that is positioned over another image, to create a before and after image switch effect.

Works in modern browsers and IE9+

Please view the source of this page for HTML markup, CSS and JS.

Related

• Add Class to Target-Element when Trigger-Element is Scrolled into View (with Throttle and Debounce)
• Add Class to Target-Element when Trigger-Element is Scrolled into View (Reduced - no Throttle or Debounce)
• Add Class to Element when Scrolled into View (with Throttle and Debounce)
• Add Class to Element when Scrolled into View (Reduced - no Throttle or Debounce)

More demos and snippets

Did you find this useful? There are more demos and code snippets this way.