Reflection Scroll Effect | Codrops

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:

Source link