Smooth Panel Scroll Effects

An exploration of smooth panel scroll effects based on Margot Priolet’s website.

From our sponsor: Target your best customers and see up to 88% more revenue with Predictive Segments. Sign up today.

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!

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.