JavaScript Reflection – Wet Floor Effect

Yes again, I’m late. I’m sorry folks, but here we go.

Once again we bring together JavaScript and CSS to produce amazing results. Notice the header at the top of this website (assuming that I haven’t impulsively changed my theme again)? Nice basic reflection, right? It’s commonly known as the Wet Floor effect. I can just hear the Photoshop folks now, “what’s so impressive about that?”. Well seeing that I lack a lot in the Photoshop field it took me about 30 minutes to get this to look even reasonably good. But I did not have to go through all that trouble.

Reflections.js provides a simple method for web developers to do this. I haven’t had too much experience with this other than just basic demos but I am again amazed at the power of JavaScript and CSS. You include the JavaScript and for each image you want to add a reflection to you add:

class="reflect"

. That’s it. It almost seems too simple doesn’t it?