Sunday, April 21, 2024
HomeWeb developmentReflection Scroll Impact | Codrops

Reflection Scroll Impact | Codrops


The opposite day I used to be marvelling over this superb animation by Jurica Koletic that he made for Scorching 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 present a mirrored image on the high of the web page. It’s actually only a small impact, anyway, I hope you get pleasure from it and perhaps it sparks some new concepts 🙂

To do the reflection, we will use a clone that’s mirrored utilizing a unfavourable scale worth after which scroll that clone on the similar time we scroll the web page.

To create the shading, we overlay a pseudo component on the physique, masking the reflection half:

physique::earlier than {
	content material: '';
	place: mounted;
	high: 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 loads of cool issues you’ll be able to attempt when scrolling, like animating a filter (see demo 2) and translating in 3D.

That is the way it demo 1 appear to be:

Hope you get pleasure from this! Thanks for taking a look 👀

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Most Popular

Recent Comments