Reflection Scroll Effect

A decorative reflection effect where we simulate a reflected page and scroll it along with the content.

The other day I was marvelling over this amazing animation by Jurica Koletic that he made for Hot Type. It’s very much skeuomorphic and sorry, but I’m a total sucker for that! So I tried recreating this little effect on a grid where we show a reflection at the top of the page. It’s really just a small effect, anyway, I hope you enjoy it and maybe it sparks some new ideas 🙂

To do the reflection, we can use a clone that is mirrored using a negative scale value and then scroll that clone at the same time we scroll the page.

To create the shading, we overlay a pseudo element on the body, covering the reflection part:

body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(var(--rheight) + 1px);
	pointer-events: none;
	z-index: 2000;
	background-image: linear-gradient(0deg, rgb(0 0 0 / 68%), rgb(15 10 23 / 62%));
	box-shadow: 0px 0px 10vh rgba(0,0,0,0.8);

There’s a lot of cool things you can try when scrolling, like animating a filter (see demo 2) and translating in 3D.

This is how it demo 1 look like:

Hope you enjoy this! Thanks for having a look 👀

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

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