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 👀
