The opposite day I used to be marvelling over this superb animation by Jurica Koletic that he made for Scorching Kind. 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 prime of the web page. It’s actually only a small impact, anyway, I hope you take pleasure in 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 identical time we scroll the web page.
To create the shading, we overlay a pseudo aspect on the physique, masking the reflection half:
physique::earlier than {
content material: '';
place: mounted;
prime: 0;
left: 0;
width: 100%;
top: 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 numerous cool issues you may attempt when scrolling, like animating a filter (see demo 2) and translating in 3D.
That is the way it demo 1 seem like:
Hope you take pleasure in this! Thanks for taking a look 👀
