May 8th, 2008
In the latest builds of Safari, you can reflect images using just CSS. Apple have come up with the proprietary -webkit-box-reflect CSS property for this.
reflection is a replica of the original object with its own specific transform and mask. The box-reflect property can be used to specify the specialized transform and mask that should be used for the replica.
-webkit-box-reflect: <direction> <offset> <mask-box-image>
<direction> can be one of above, below, left or right.
<offset> is a length or percentage that specifies the distance of the reflection from the edge of the original border box (using the direction specified). It can be omitted, in which case it defaults to 0.
<mask-box-image> is a mask-box-image that can be used to overlay the reflection. If omitted, the reflection has no mask.
Why use this over Reflection.js? Well, you can reflect any element - not just images. This includes for example the <video> element. But unfortunately it’ll only work in Safari and as far as I know, no other browser vendors are in the process of implementing anything similar.
In the future perhaps Reflection.js will simply provide a wrapper using <canvas> in Firefox and Opera, Webkit CSS in Safari and VML in Internet Explorer (at the moment canvas is also used in Safari).
March 24th, 2008
Coverflow in Javascript seems to be a big trend at the moment. Raith created an absolutely stunning script which implements not only a coverflow in Javascript complete with angled images and reflections, but a iPod-style scroll wheel in Javascript.
Raith writes:
Hiya. I’ve worked plenty more on my “CoverFlow” javascript and present the first release here. The CoverFlow and the PodNav items below are 2 entirely separate modules which just happen to work really nicely together. You can happily use either one without the other. The CoverFlow can be as wide as you want and use any size (square) images.
I’m not even entirely sure how the angled images are created in Javascript but it’s certainly not lots of divs and it’s very very fast. Also, the script seems to be surprisingly small in download size. Simply stunning.
March 21st, 2008
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?
Version 1.9 fixes an issue in Firefox 3, Safari 3.1 and other browsers which implement the document.getElementsByClassName function natively. In older versions of reflection.js, every second image will get reflected.
Demo
See a demo of reflection.js 1.9 in action or try it out with one of your images on the reflect-o-matic.
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.
Thanks!
Thanks once again to everyone who has used the script, left feedback and helped to iron out any bugs or issues over the last years! If you use the script on one of your site or photo galleries, please leave a comment! It’s really fantastic seeing how people put the script to use!
March 17th, 2008
You’ve probably all seen “coverflow” in the new iPhone and iPod Touch. It shows your album covers in a “carousel” kind of format, where you can flick between different albums.
ProtoFlow is a script which implements this on your website using Javascript. It generates the effects and interface using Prototype.js and Scriptaculous, and the image reflections using Reflection.js.
The interface dragging through the different albums is really nice. It doesn’t distort/angle the albums at the side (this could possibly be achieved using Christian Effenberger’s amazing reflex.js , albeit with additional licensing restrictions). It also doesn’t seem to work in IE.
I think it’s a fantastic example of what Reflection.js can do anyway (also notice the reflections of the album covers show through each another). A script to watch!
March 7th, 2008
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?
There are several improvements especially for Internet Explorer - firstly, reflections now show below the image as they should in IE standards mode. With scaled images in IE, reflections are no longer stretched. As some modern browsers support document.getElementsByClassName out of the box, Reflection.js will no longer overwrite this function. And finally, a copy of reflect-o-matic has been bundled with the download for ease of use.
Demo
See a demo of reflection.js 1.8 in action or try it out with one of your images on the reflect-o-matic.
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.
Thanks!
Thanks once again to everyone who has used the script, left feedback and helped to iron out any bugs or issues over the last years! I’m very pleased that the script was downloaded from this website for the 100,000th time this month. If you use the script on one of your site or photo galleries, please leave a comment! It’s really fantastic seeing how people put the script to use!
March 5th, 2008
For some reason, Opera seems to handle the onload event for images differently from other browsers - I think it called onload() on an image which I had created in the DOM (and hence was already cached) but not yet added to a document. Or it didn’t call onload() on an already loaded image.
Anyway, something along these lines sorted it:
if (window.opera && image.complete) {
image.onload();
}
So Opera fans can now use Reflect-o-matic version 2! There still seems to be some issues with the image search in Opera but thats a minor thing. Now just to get it to work in Internet Exploder…
March 2nd, 2008
After yesterday’s release of reflect-o-matic v2, I’ve just created a bookmarklet for reflect-o-matic.
This is pretty funky.Drag the bookmarklet to your bookmark or links toolbar. Then when you’re on any webpage on the internet, clicking the bookmarklet will show you all the inline images and all the linked images from the current page. You can then load it into reflect-o-matic just by clicking on the image.
This should hopefully save a lot of time: see a nice picture on Flickr and hit the “Reflect-o-matic” bookmarklet. “Reflect-o-matic” has an algorithm which will try to make the reflection look pretty nice and give you the HTML code to add it to your webpage. Just paste the HTML into your webpage and you’re done. No more copy and pasting of URLs!
Remember that you should not insert copyrighted images or hotlink images from other webpages without permission from the copyright/website owner first. It is your responsible to ensure this.
March 1st, 2008
To celebrate 40,000 downloads of Reflection.js v1.7 (and 99,000 since the first release of Reflection.js at the end of 2005), I am pleased to present Reflect-o-matic version 2.
The first version of reflect-o-matic was really designed as a very quick way to test Reflection.js on one of your own images. With this version, I hope to turn it into a tool which Reflection.js users can use regularly to simplify the task of adding reflected images onto their site.
Some new features:
- Search for web for images from Reflect-o-matic
- “Link to this page” feature
- Improved user interface
Try reflecting the google logo, a Heroes wallpaper or the Apple iPhone.
Or choose and find from images of Cambridge, the London Eye and the Space Shuttle.
A bookmarklet should be available soon to aid webmasters in using Reflect-o-matic.
At the moment it only works in Firefox and Safari. It doesn’t work in Opera or Internet Explorer, so please treat this as a beta release!
November 27th, 2007
The latest security update to Firefox, version 2.0.0.10 breaks Reflection.js as well as pretty much every other similar script which uses <canvas> to manipulate images.
Have a look at the Mozillazine Thread and Bug #405584.
I’m surprised that Firefox QA missed this one. It looks like version 2.0.0.11 will be released to fix this bug.
Thanks to everyone who told me about this and/or submitted a bug to Mozilla.
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.
