The opposite day I used to be marvelling over this wonderful animation by way of Jurica Koletic that he made for Sizzling Sort. It’s very a lot skeuomorphic and sorry, however I’m a complete sucker for that! So I attempted recreating this little impact on a grid the place we display a mirrored image on the most sensible of the web page. It’s in reality only a small impact, anyway, I am hoping you experience it and perhaps it sparks some new concepts 🙂

To do the mirrored image, we will be able to use a clone this is reflected the usage of a adverse scale worth after which scroll that clone on the identical time we scroll the web page.

To create the shading, we overlay a pseudo part at the frame, protecting the mirrored image phase:

frame::sooner than {
	content material: '';
	place: mounted;
	most sensible: 0;
	left: 0;
	width: 100%;
	peak: 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 large number of cool issues you’ll take a look at when scrolling, like animating a clear out (see demo 2) and translating in 3-d.

That is the way it demo 1 appear to be:

Hope you experience this! Thank you for taking a look 👀