JavaScript Reflection - Wet Floor Effect | Web Development 2.0: Web Design, CakePHP, Javascript

JavaScript Reflection - Wet Floor Effect

Tuesday, December 12th, 2006

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:

PLAIN TEXT

HTML:

class="reflect"

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

Popularity: 9%

3 Responses to “JavaScript Reflection - Wet Floor Effect”

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

FP Images, on March 2nd, 2007 at 5:28 pm

Trackbacks & Pingbacks

Baz Web Development: AJAX, Joomla, CSS » Blog Archive » More JavaScript Reflections - Automated JavaScript Vertical Flip Image Reflection, on February 21st, 2007 at 8:25 pm
Review: StaticPageBuilder | Web Development 2.0: Web Design, CakePHP, Javascript, on September 18th, 2007 at 11:34 am