I bookmarked these lovely carousel designs by Francesco Zagami months in the past, and after studying concerning the new scroll-driven animation properties, I assumed I’d take a stab at recreating them with CSS (no JavaScript).
Be aware that presently, that is the assist we’ve bought:
Right here is how the primary demo seems to be:
I had to make use of just a few methods to work round some browser limitations, particularly with scroll-snapping and sticky positioning. In demos 1 and three I resort to utilizing hidden scrollable parts and pointer-events: none to go scroll occasions via to them, as a substitute of nesting the photographs throughout the scrollers. (Clearly, these experiments are for academic functions solely and would want fairly a bit of labor to be something near production-ready 🙂)
In the event you take a look at the underside of the third demo, you’ll discover the caption stretch vertically in proportion to how briskly you’re scrolling (⚠️ flashing gentle warning):
All credit score for this trick goes to Bramus, who got here up with a method to compute the scroll velocity with CSS alone. His article is certainly definitely worth the learn, and contains some fairly mind-blowing demos as nicely.
It’s loopy to assume what we would be capable to construct as these options progress! I can’t wait to see what different folks make with them.
Needless to say these demos are extremely experimental and should not operate seamlessly throughout all browsers and gadgets. However, they goal to encourage and showcase potential purposes of CSS scroll animations in real-world situations.
Thanks for checking by!
