Here’s a secret: You may not need
scrollevents in your next app. Using an
IntersectionObserver, I show how you can fire a custom event when
position:stickyelements become fixed or when they stop sticking. All without the use of scroll listeners.
One of the practical limitations of using CSS sticky position is that it doesn’t provide a platform signal to know when the property is active. In other words, there’s no event to know when an element becomes sticky or when it stops being sticky.
This is really excellent: take a JPG, which has great compression for photos, but doesn’t support transparency, and link it within an
<svg> which can apply a clipping mask based on a path. The path can be traced manually over the photo in Photoshop or Illustrator, and can be exported as an SVG file from Illustrator. The following code (minus the path data), demonstrates how to do this:
<svg viewBox="0 0 921.17 1409.71"> <defs> <clipPath id="chris-clip"> <path d=" ... " /> </clipPath> </defs> <image xlink:href="/images/chris.jpg" clip-path="url(#chris-clip)" x="0" y="0" width="921" height="1409"> <svg>
These are awesome and mesmerizing, even more so that they demonstrate what can be done with native browser WebGL APIs. Give them a try. (Warning: some may be quite laggy if you have lower end hardware, and I haven’t tested these on mobile.)
Ever wanted to paint realistic-looking brushstrokes in your browser? You’re welcome.