Cow’s Blog

September 8th, 2007

Reflection.js is a cross platform script which allows you to add reflections to images on your web pages.

It works in all the major browsers - Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers, it’ll degrade and your visitors won’t notice a thing. Best of all, it’s under 5KB.

What’s New?

Just a small bug fix update to Reflection.js fixing an issue where hyperlinks around reflected images didn’t work in Internet Explorer.

The Reflection.js webpage has also been given a facelift and Reflectomatic now has five sample images to make it easier to try out Reflection.js for yourself.

Demo

See a demo of reflection.js 1.7 in action.

The reflection.js download includes some more examples of how reflection.js can be used including varying the height, opacity and responding to user actions.

Thank you!

I should once again say thanks to all the people who’ve used the script, left their feedback and helped iron out any issues. If you’ve used the script on one of your sites or galleries, please leave a comment! It’s great seeing how people put this script to use.

• Javascript , Reflection , Web 2.0
• Comments(112)

October 27th, 2006

I came across Easy PHP Reflections today which does a similar job to Reflection.js by adding the reflection effect or the "wet floor" effect to images on your website.

It’s a very nice script and does a similar job to Reflection.js but it does it on the server side. As I can see, both Javascript and PHP have their own advantages:

Javascript:

• Automatically blends into background colour or even a background image.
• The size of the script is compensated through not having to download extra images.
• Offloads the processing onto the end user.
• Keeps the code clean through unobtrusive Javascript.
• Scripted reflections, and changing of opacity/height on the fly.

PHP:

• Works in older browsers.
• Can do things that a Javascript can’t, such as perspective.

The PHP script is really nice in that you can change the height and opacity of the reflection, similarly to my Javascript.

It got me thinking about a hybrid Javascript/PHP reflection script. It’d work similarly to Reflection.js does today - find all images with the class "reflect" and play around with the DOM adding a reflection.

It could have the best of both worlds - using the <canvas> tag for good modern browsers which support it (everybody but IE), proprietary CSS for IE and a fallback on server-side PHP reflections for browsers supporting neither. This would provide a unified way for anybody to easily and quickly add a reflection to an image and to have it work in any browser whilst keeping the bandwidth savings of client-side reflection.

In other reflection news…

It seems like every time I open a magazine or catalogue these days, there will always be an advert with a reflection/wet floor effect. I was browsing through the Tesco catalogue the other day; all the DVD titles had a reflection effect. In a leaflet from the Carphone Warehouse, there is a reflection effect under every single phone. Even McDonalds is adding a reflection effect to their Big Mac and fries.

Reflection.js hasn’t seen updates for a while. There have been some posts about links not working in IE and some patches have been posted in the comments. I just haven’t had the time to review all the patches in the comments and to make the required changes to Reflection.js because of a busy schedule. 

• Javascript , PHP , Reflection , Web 2.0
• Comments(7)

September 24th, 2006

It’s been quite interesting watching the proliferation of reflections across the web over the last few months.

Reflection.js is still popular - it’s homepage has recieved 10,000 views so far this month. Last month it recieved 8,000; in July it had 17,000 views. The reflect-o-matic service has recieved 4,000 views. I’m not sure how many times the script has been downloaded but I’d hazard a guess somewhere around 20,000. What’s for sure - the reflection trend isn’t dying yet.

There was a post on Signal VS Noise about a week ago covering the whole reflection trend. Through the comments, I found a Nissan Website which is really on the whole 2.0, carousel and reflection trend. This one is really silly as it has Exhilaration_2.0, Family Room_2.0, Space_2.0, Technology_2.0 and it goes on.

So, where might reflections go next? Since Apple are adding reflections to everything, perhaps the Mac OS X 10.5 graphical kernel panic will get a reflection:

Click on the image for a 1600×1200 wallpaper version. Looks great on any operating system. 

• Reflection , Web 2.0
• Comments(4)

July 14th, 2006

Reflection.js is a cross platform script which allows you to add reflections to images on your web pages.

It works in all the major browsers - Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers, it’ll degrade and your visitors won’t notice a thing. Best of all, it’s under 5KB.

What’s New?

Just a small bug fix update to Reflection.js fixing two bugs:

• Don’t create a <div> in browsers not supporting canvas but supporting JS
• Fix gap between image and reflection in XHTML Strict

Demo

See a demo of reflection.js 1.6 in action.

The reflection.js download includes some more examples of how reflection.js can be used including varying the height, opacity and responding to user actions.

Thank you!

I should once again say thanks to all the people who’ve used the script, left their feedback and helped iron out any issues. If you’ve used the script on one of your sites or galleries, please leave a comment! It’s great seeing how people put this script to use. 

• Javascript , Reflection , Web 2.0 , Web Development
• Comments(151)

July 5th, 2006

Reflection.js and Lightbox

Reader Jon has managed to integrate Reflection.js with Lightbox. 

Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It’s a snap to setup and works on all modern browsers.

Grab a modified version of Lightbox with Reflection.js. By default the lightbox version uses a height of 10% and an opacity of 20% which looks fabulous with larger images and photographs.

Cliches

Reflection.js was mentioned on 8 Web Design Clichés of 2006 (Coral Cache) which made Digg earlier today. Here’s what they said about reflections/wet floor effects:

Thankfully, I think this particular trend has died down somewhat, but for a while at least, you couldn’t move for the so-called ‘wet floor’ effect. Essentially an inverted reflection underneath your shiny logo, image, or photo with a gradient mask applied - giving the appearance that the image is perpendicular to a shiny surface.

I think Apple used this effect in one of their products, causing a surge in usage - similar to the ‘glass sphere’ button effect abused by Mac applications - although thankfully, most people realized that ‘wet floor’ is a nice gimmick, but not something to be overused.

It’s been quite interesting reading comments around the blogosphere; many people think reflections are a fad which are dieing out. I think they’ve still got a bit of life in them at Office 2007 has Reflections on WordArt, but I reckon people will probably get bored of them around the end of this year.

(It was interesting looking at the stats - I got about 2,500 hits from being linked off a Digg article and around 10,000 when directly linked from Digg) 

I came across the article "Reflecting on Reflections": 

But now, thanks to this single piece of javascript (that can automatically make images on your website appear with reflections), I think it’s truly going to be all over for the humble reflection.

It’s kind of a shame, I liked them for a while. Oh well, cool things always have to end up being uncool, else they were never cool in the first place I guess.

Oh my god, I killed Web 2.0. 

Flash Reflections

This is not related to Reflection.js in any way but I stumped upon a component to do reflections in Flash. Sweet!

Reflection Height and Opacity

I came across rig.hteo.us in my comments which implements reflection.js and I think it looks fantastic. Their reflections use a 15% height and 15% opacity setting. The lightbox script above uses a height of 10% and an opacity of 20%.

By default, Reflection.js uses a height and opacity of 50%. I think this was mainly because when I was developing it, I used small 80×80 icons and logos and with these, a 50% height and opacity reflection looks fantastic. When you come on to bigger images, more subtle reflections tend to work better. The script.aculo.us reflector sets it’s default to 33% height and 33% opacity. This is probably a much more sensible default than the defaults of Reflection.js but I don’t want to change it as many people as it would change the behavior of reflection.js implementations when the script is updated.

When implementing reflections, make sure you fiddle around with the rheight and ropacity classes for optimal aesthetics. 

• Javascript , Reflection , Web 2.0 , Web Development
• Comments(7)

May 25th, 2006

I put together Reflect-o-matic this afternoon. It’s a nice tool which demonstrates the options and functionality in Reflection.js but also allows people to create a reflection in their browser quickly which they could print screen and save as an image to use on their website or presentations.

The script will firstly ask you to provide the URL of the image you want to reflect. Click on "Go" when you’ve entered the URL. If you wish, you can use the sliders or the boxes to adjust the image scaling (image size) and the parameters of the reflection (opacity, reflection height).

You can also change the background colour if you don’t want a black background.

Reflect-o-matic will update the reflection as you move the slider so it’s really easy to perfect the look of the reflection. Finally, it’ll also give you the HTML code to include the reflection on your site.

It’s all done on the client side (how very AJAX!) so there is no uploading to the server or callbacks to the server. 

Downloadable Reflect-o-matic

The initial version of Reflect-o-matic allowed you to select an image from your hard drive which it would then reflect. Due to browser security, this version cannot be run from the web and will only work if you run it off your hard drive. If you want this version, download it here. 

Replace reflectomatic.html with the code here if you want it to allow you to input a URL. 

Feel free to copy/modify/improve Reflect-o-matic and to offer it to visitors on your website - however if you do so please make sure you are complying with the license of the slider script. 

A big thank you to Sunny Boy for help and assistance

• Cool Stuff , Javascript , Reflection , Web 2.0 , Web Development
• Comments(0)

May 23rd, 2006

Thanks for everyone who linked to, tried out and commented on the reflection.js script over the last few days. In case you didn’t notice, we made it onto the front page of Digg, Boing Boing, Del.icio.us/popular and some web design sites.

Implementations

Andrew posted some great info on how you can implement Reflection.js on your phpBB forum. It consists of a change to a couple of templates which will add the reflection effect to avatars. There is already an vBulletin modification.

Roderickm pointed me towards a theme for ZenPhoto (a simple PHP image gallery) which implements Reflection.

It’d be interesting to see an implementation for Lightbox. Might be interesting to see whether it also works well in the context of a Firefox extension such as the ones which display screenshots of all the tabs).

Other Reflection Scripts

A couple of people linked to some other reflection scripts:

• Dynamic Drive: This IE5+ only reflection script uses a couple of IE-only image filters to create an animated water wave effect.
• Script.aculo.us Reflector: This reflection script made the rounds about a month ago. It creates a reflection by creating tons of divs of differing opacities. In contrast, reflection.js uses one canvas or image with a gradient. The author of the reflector does say it’s more of a proof of concept. I believe that Reflection.js is at the stage where it can be used on production websites; it’s been around for 5 months and several different versions. The other main difference between the two is the Script.aculo.us Reflector probably needs a few dozen KB of JS and the Prototype library whilst Reflection.js is just 5KB.
• Improved Reflectors: An improved version of Reflection.js 1.0 and an improved version of the Script.aculo.us Reflector. It’s a shame that the release of the improved Reflection.js came at the same time as that of version 1.5 as a lot of work could have been saved

Problems

A common issue is another script takes over the window.onload attribute. This happens with Wordpress sometimes; you include reflection.js but Wordpress overwrites the window.onload handler with it’s own handler. The solution is to load reflection.js afterwards, modify the code so it doesn’t overwrite window.onload or use Reflection.js’ Javascript functions.

There are reports of crashes with Firefox 1.5.0.3 Mac UBs. This is a Firefox bug.

Usefulness

A common question is why anyone would use Javascript to do image reflections. I think it comes into it’s own with avatars or user-generated content. It’s also really easy to change the attributes of the reflection. There are a couple of others which aren’t listed on the reflection.js page:

Someone said it would save bandwidth as you’d only have to download the actual image rather than the image and the reflection. With a few large reflected images, you’d probably save more than 5KB of bandwidth which makes up for the size of the Reflection.js. I guess this could be true

Firefox 2.0 also supports Canvas toDataUrl() which is real sweet and theoretically you’d be able to get the browser to generate the reflection once and upload that onto the server so visitors in the future can download a pre-rendered reflection. Firefox can replace PHP or other server side languages. 

• Javascript , Reflection , Web Development
• Comments(1)

May 19th, 2006

I’ve just released an big update to reflection.js - a cross platform script which allows you to add reflections to images on your web pages.

It works in all the major browsers - Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers, it’ll degrade and your visitors won’t notice a thing. Best of all, it’s under 5KB.

What’s new?

This is a huge update. It fixes many of the bugs and issues that users have been experiencing with previous versions and adds the much-requested ability to set the opacity and the height of the reflection. It also adds scriptable reflection so you can have your reflections repond to user events - for example have the reflection get brighter when the mouse is moved over it. It also works a lot better with scaled images.

As this fixes quite a few bugs, it’ll may also change the look of some of the reflections on your site. Some stuff such as the wholeimage class has been removed. So make sure everything works properly before you upgrade.

Demo

See a demo of reflection.js 1.5 in action.

The reflection.js download includes some more examples of how reflection.js can be used including varying the height, opacity and responding to user actions. Check out the new testsuite too!

Thank you!

I should thank everybody for their feedback and help getting us towards version 1.5. In particular Josh who pulled his hair out trying to fix a problem with reflection of landscape images in Safari! 

• Javascript , Reflection , Web 2.0
• Comments(114)

May 12th, 2006

I found this through referral logs. It’s a modification of reflection.js so it can be used with image replacement. Image replacement is supposed to be a more accessible way of including an image which contains text into a webpage.

The most simple method of image replacement is as follows:

<h1><span>Cow's Blog</span></h1>

h1 { background-image: url(backgroundimage.gif); width: 200px; height: 50px; }span { display: none; }

The idea is that screen readers and other tools will still get the original text. The example of image replacement I’ve given is a very old method which has been replaced by newer methods but the general idea is the same.

It’s quite interesting seeing the demo of the reflection script with support for image replacement (I had to refresh it once before it worked presumbly because the image was not in memory the first time the script loaded.

Safari Woes

Some users have experienced some problems using reflection.js with Safari. It seems that with images where the height is greater than the width, the reflection does not show correctly. We’ve made a bit of progress (scroll down the comments) but I don’t have a Mac nor do I know the ins and outs of Safari.

If any web developers who use Javascript are around, we’d love your help.

vBulletin Reflection

Came across this very nice modification for vBulletin which adds image reflections to avatars on your forums and a new [imgreflect] BBCode for members to add reflections to a image they post.

• Javascript , Reflection , Web Development
• Comments(3)

April 29th, 2006

I’m pleased to release reflection.js v1.0 - a cross-browser script which allows you to add reflections to images on your web pages.

It works in all the major browsers - Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers, it’ll degrade and your visitors won’t notice a thing. Best of all, it’s under 4KB.

What’s new?

The main thing is that reflection.js now works in Internet Explorer. Depending on which browser you’re using, reflection.js will decide whether to use DXImage Transformations or the HTML5 canvas tag.

Unlike previous versions, this version also doesn’t require prototype.js. That means the size of the script has effectively been reduced from 32KB to 4KB. 

Demo

See a demo of reflection.js 1.0 in action. 

• Javascript , Reflection , Web Development
• Comments(63)