From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
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:
![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/10/ScrollPanels_01.jpg?x86293)
When scrolling, an image section is revealed with an opacity effect. Here, there are many possibilities for variations.
![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/10/ScrollPanels_02.jpg?x86293)
After scrolling for a bit and triggering the effects on the images, we reach the final section.
![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/10/ScrollPanels_03.jpg?x86293)
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!