Skip to content


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:
[code='html']class="reflect"[/code]. That’s it. It almost seems too simple doesn’t it?

Posted in CSS, General, JavaScript.

Related Posts

  • None Found

3 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

  1. FP Images says

    I love Reflections.js

    You can not “link” images, but it is a detail.

    Very nice examples of reflection.js implementation:

    http://www.featurepics.com/Editorial/Image-Reflection-Special-Effect.aspx

Continuing the Discussion

  1. Baz Web Development: AJAX, Joomla, CSS » Blog Archive » More JavaScript Reflections - Automated JavaScript Vertical Flip Image Reflection linked to this post on February 21, 2007

    [...] I’m not sure what to make of this: Automated JavaScript Vertical Flip Image Reflection. It adds reflections to images using JavaScript. But, am I missing something here, or has it already been done? It seems to do basically the same thing with less flexibility and it doesn’t work in IE. [...]

  2. Review: StaticPageBuilder | Web Development 2.0: Web Design, CakePHP, Javascript linked to this post on September 18, 2007

    [...] cool, even a lil’ Web 2.0 (ish). There are some nice Web 2.0 buttons, a basic logo with some reflections. But then I looked at the source and was gravely disappointed by the number of tables there [...]



Some HTML is OK

or, reply to this post via trackback.

CommentLuv Enabled