From our sponsor: Agent.ai Builder is now open—no waitlist. Explore 12+ foundation models, no-code to full-code. Free!
If you have browsed through our latest website roundup you might have seen the amazing website of Margot Priolet. I absolutely love the hero section effect when scrolling and I wanted to remake it and explore some variations including playing with transforms and filter effects.
So the initial view is a hero section like this:
When scrolling, an image section is revealed with an opacity effect. Here, there are many possibilities for variations.
After scrolling for a bit and triggering the effects on the images, we reach the final section.
This is how it all comes together:
This demo shows how to play with smaller images and the black and white filter.
Hope you enjoy this and find it useful!
