Reflect.js: Using <canvas> to reflect images unobtrusively
A while back I had read an article about using the <canvas> tag to reflect images in Safari/Firefox. After looking over Cow's article I decided to re-vamp the code and make it a bit more extensible and lightweight. This example works only in Safari/Firefox!
Tired of reading already? Skip to the examples. Just want to try it yourself? Download the modified prototype.lite.js, the Reflect.js class or the complete Reflect package.
Out went prototype.js. That sucker is far too weighty and although many programmers use it in their projects I am not one of those people. I prefer the Moo library. It doesn't have all the bells and whistles but I don't need those. My version also allows the reflections to be applied locally instead of on a global page scale. Sure, the tag "reflect" limits which images actually receive the reflections but that's not the point. There may be instances where scanning an entire page isn't feasible or effecient. It's just more extensible to let a developer choose where to apply the code.
I cleaned up the code a little bit, removing some if/elses which involved seperate class names and removed some of the magic numbers for ease of understanding. One of the bigger jobs was restructuring the code so that the fades actually went smoothly from 100% to 0%. Cow's version had unpredictable results with images that were not of medium-small (~125px) height. Update: Turns out the unpredictable fades were just bad math. Sorry, Cow.
I also modified document.getElementsByClassName in prototype.lite.js to allow selection of tags in a specific entity, not all tags document-wide. I never understood why the boys at Mad4Milk didn't allow for such flexibility in their modifications.
Copyright Issues
All images and photos were found on the internet and are copyrighted their respective owners. They
are presented here for demonstrative purposes. If you are the copyright owner of one of these images
and would like me to take it down, please contact me and I will
remove it immediately.
The icons seen below come from the set "Ricebowl"
by Phytonix.
How it works
The goal with this (and everything I create) is to make implementation as easy and painless as possible while still allowing full control over the details, should you choose. All you need to do is include the prototype.lite.js and Reflect.js classes and simply add one line to your onload function. You must specify what collection of images to which you are applying the reflections. This can be as wide as document or as specific as a div with an id. There is also the option to choose specific images which are to receive reflections but you must specify a collection irregardless.
Example Code
The following code should go between the <head> tags. It specifies a collection with the id of "examples", a 50% falloff, default wrapper (div), default opacity (50%) and, further, specifies images with the ids of "sg" and "mask" are the only images to receive reflections.
<script type="text/javascript" src="js/prototype.lite.js"></script>
<script type="text/javascript" src="js/Reflect.js"></script>
window.onload = function()
{
var reflect = new Reflect('examples', {falloff: 50, images: Array($('sg'), $('mask'))});
}
This example further expands the functionality by changing the settings of the reflections on the mouse over and out states.
<script type="text/javascript" src="js/prototype.lite.js"></script>
<script type="text/javascript" src="js/Reflect.js"></script>
<script type="text/javascript">
window.onload = function()
{
var obj = $('examples');
obj.reflect = new Reflect(obj.id, {falloff: 50, opacity: 80});
obj.onmouseover = overReflection;
obj.onmouseout = outReflection;
}
function overReflection()
{
this.reflect._opacity = 30;
this.reflect.reloadReflection();
}
function outReflection()
{
this.reflect._opacity = 80;
this.reflect.reloadReflection();
}
</script>
To-do
It'd be nice to wrap this up with Emil's VML/htc IE setup or Mark Finkle's SVG/htc version to create a cross-browser image fader.
Comments?
If you have any comments or (constructive) critiques, please feel free to send them through my contact page.
Examples
50% falloff, <p> wrapper, 70% opacity
30% falloff, <div> wrapper, 30% opacity, 80% opacity onmouseover
Default falloff, default wrapper, 55% opacity
Have a gallery you want to spruce up? You too can have Apple shininess with ease. These image and description pairs are wrapped in a <div> which has float: left.
Diggnation Episode #0038
3/25/2006
Diggnation (videos)
Computers
55:52
Ctrl + Alt + Chicken
3/23/2006
Ctrl+Alt+Chicken Large Quicktime
20:24
Episode 14 – Boomerang
3/23/2006
Tik Bar Tv (video)
Comedy
4:53
Episode 13 – Skull & Bones
2/13/2006
Tiki Bar Tv (video)
Comedy
5:28
Episode 12 – Holiday M...
12/31/2005
Tiki Bar Tv (video)
Comedy
3:46
Episode 11 – Volcano
12/16/2005
Tiki Bar Tv (video)
Comedy
5:56
Episode 10A – Drinkbot Outtakes
11/27/2005
Tiki Bar Tv (video)
Comedy
2:11