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://2busy4it.com/wp-content/uploads/2022/10/ScrollPanels_01.jpg)
When scrolling, an image section is revealed with an opacity effect. Here, there are many possibilities for variations.
![](https://2busy4it.com/wp-content/uploads/2022/10/ScrollPanels_02.jpg)
After scrolling for a bit and triggering the effects on the images, we reach the final section.
![](https://2busy4it.com/wp-content/uploads/2022/10/ScrollPanels_03.jpg)
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!