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 👀
