Cow’s Blog

December 19th, 2005

Wow, thank you all for your comments and feedback. Imagine my surprise when I saw this on my reading list in Sage yesterday morning and an article on reflection.js made the front page of Digg. I guess I’m going to have to deal with an angry sysadmin for using the same amount of bandwidth in the last 36 hours as I used in the last 3 months At least I can report that neonDragon.net and Geneone can handle the digg effect/slashdotting

Safari

Various people have commented that the script does not work in Safari. Theoretically it should work as Safari supports canvas so I suspect that that my Javascript code is at fault. I don’t have a Mac nor is there a version of Safari for Windows so I’m unable to fix this. If anyone with Safari could take a look and maybe fix it, that’d be great. Either mail it to linuxrocks AT gmail DOT com or blog it or leave a comment. For the record, the script is freely distributable and usable.

Why Javascript?

It has been suggested at Channel 9 that "not everyone has a P4 2.8Ghz CPU people; why not pre-render the images if you want them to look like that every load". Doing reflections in Photoshop for every image can get tedious and although you can use PHP, not everyone has access to it. Additionally, using Javascript+Canvas you can do some additionally cool things. For example, have the opacity of the reflection change when you move your mouse over it. If you want to add reflections to forum avatars, JS+Canvas will probably also be a much better solution.

Can you change the parameters?

Parameters such as angle, opacity and fade are hard coded into the script but can be modified with a little bit of work. The following two lines control how it fades out:

gradient.addColorStop(0, "rgba(255, 255, 255, 1.0)");
gradient.addColorStop(0.9, "rgba(255, 255, 255, 0.5)");

The first parameters controls the location of the colour stop. The second parameters control what colour the colour stop is. If you want the image to fade out more intensly, try changing the first argument of the second colour stop to 0.5. If you want the reflection to be more transparent, change the 1.0 and 0.5 arguments. More on DevMo.

To change the height of the reflection, changing every instance of reflect[i].height/2 will pretty much do it. Changing the angle doesn’t work particularly well because canvas can’t (AFAIK) do perspective.

On Prototype

In the demo, I used the Prototype.js library. The only line of code which actually uses any Prototype.js features is var reflect = document.getElementsByClassName(’reflect’);. If you can replace this line with something else to find all elements with the class name "reflect" then you can remove the requirement to have Prototype.

Downloadage

Download Reflection.js. 

• Uncategorized
• Comments(4)