Thursday, April 27th, 2006
script.aculo.us Reflector
Category: Examples
, Prototype, Showcase
We all want cool effects right? I remember when applets came onto the scene, you would see the reflection animations (that would take 30 mins to download over your 28.8 modem).
Not Thomas Fuchs has put together a script.aculo.us Reflector that runs on top of Prototype/Scriptaculous (or course).
JAVASCRIPT:
-
-
var Image = {
-
reflect: function(element) {
-
element = $(element);
-
options = $H({
-
amount: 1/3,
-
opacity: 1/3
-
}).merge(arguments[1] || {});
-
-
if(!element.complete) {
-
setTimeout(function(){Image.reflect(element,options)}, 10);
-
return;
-
}
-
-
var p = element.parentNode, n = element.nextSibling;
-
var d = 1.0/(element.height*options.amount);
-
-
(element.height*options.amount).times( function(line) {
-
var h = Builder.node('div',{style:'height:1px;overflow:hidden'},
-
[Builder.node('img',{src:element.src,
-
style:'margin-top:-'+(element.height-line-1)+'px'
-
})]);
-
p.insertBefore(h,n);
-
$(h).setOpacity((1-d*line)*options.opacity);
-
});
-
}
-
}
-
-
Image.reflect('wollzelle');
-
4.1 rating from 97 votes
Not working in Safari.
AWESOME when it does work!!!!
This is cool because it is cross platform. BUT you had best have a modern computer that is fast enough to support a rather fat DOM solution. It’s unfortunate that IE (and even IE 7) doesn’t support the canvas tag like Firefox and Safari do, otherwise the real solution would be to use canvas-effects to do this. As mentioned here: http://cow.neondragon.net/stuff/reflection
Oh, and one more thing - spelling error: “Not Thomas Fuchs…” should be “Now Thomas Fuchs…”
Some contrast, please.
Reflection’s too dark to apreciate correctly in a bright room. I almost missed the effect completely.
Very cool. Unfortunate variable naming though, as it overwrites the Image object. So “new Image()” no longer works. :(
Scriptaculous has fallen out of favor with me since the new version is broken in gecko browsers
Also that doesn’t work with me in Epiphany 2.14, a gecko browser.
Awesome. Now it takes a huge amount of javascript to show a simple reflection for an image, which isdefinitely what the net needs.
I know, when you’re making the image web-friendly, use Photoshop to add a reflection.
Removing my own shin bones would be cool, but difficult and painful to do - see any connection to this script?
@Dan: This is meant as a demo of what you can do with just a few lines of JavaScript when using the Prototype/script.aculo.us libraries.
No one forces you to use it (plus, my original article explicitly states that it’s not meant for production use).
@Bjorn: Can you please tell what you mean by “Scriptaculous has fallen out of favor with me since the new version is broken in gecko browsers”? It’s working fine for me….?
I agree with Jeffrey that this is a lot better with Canvas. This effect is fancy, but the question is: Would you handcode that in HTML? We can do _anything_ with the DOM, but that doesn’t mean we should.
As to Dan’s comment: The difference is that I can do this effect with images I didn’t create or I could even do it with non-image content.
[...] Check it out here. Don’t overuse it. Use it for good, not evil. [...]
Great and simple!
Thomas: I’m in now way attacking the script, and there’s no question that protype and script.aculo.us are a great set of tools. It’s the idea of making simple things more complicated, which is the way some of the featured items here do. I agree, its fun to push the boundries of what certain technologies can do. But within three days this script will be on every goddamn blog in history.
Chris: If you want to create mirrored HTML its time to shut the internet down and go home. As for using other peoples images, don’t.
That dude on the right is PIMP
Experimental JS effects are always interesting, there’s nothing wrong with that.. but mis- and over-use (dripping blood-lines and animated fireball .GIFs, anyone?) never goes over well in the long run. I have a prototype “genie effect” which makes many copies of an image in similar fashion, but most CPUs will catch fire trying to render it. ;) Still, it’s always neat to see what kind of tricks and fun effects people can pull with Javascript.
@Mike:
to avoid overwriting the native Image object, you could replace
var Image = { ...stuff... }with
var Image = Object.extend(Image || {}, { ...stuff... });…which falls back to a fresh object if for some reason the native object is not there.
Thats really nice work, really nice.
Scripts like this, the “genie effect” by scott schiller, and the 3d cube rotation a while back all use multiple instances of the same image to slice up; which doesn’t work very well if caching is turned off. Of course, caching is usually on for most people, but if it isn’t it results in multiple requests for the same image, and slowing down everything. I only notice this since I turn caching off when working, and i often forget to turn it back on.
woah awsome.. I just realized you replicate the image for each px line… very cool.
If you dig these effects with multiple instances of images and such you should check out some flash (fla) sources that emulate a mode 7 (aka Mario Kart, DOOM) mode. That would be tight to see in js.
http://www.gotoandplay.it/_articles/2003/07/mario_kart.php
http://www.gotoandplay.it/_articles/2004/11/mode7proto.php
geez yall are harsh…but i see your points.
[...] Scriptaculous Reflector >> L’article sur Ajaxian >> [...]
i want to have this file in a zip format can you email me.
[...] Ajaxian » script.aculo.us Reflector pretty cool and completely useless! [...]
Alternatively, you could do this:
<style>
body {
background-color:black;
color: white;
}
img.reflect {
code: expression((function(img){
if (!img.reflected) {
img.reflected=true;
var rImg = document.createElement(’img’);
rImg.style.cssText = “position: absolute; clip: rect(auto auto 30% auto); filter: flipv alpha(opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=30)”;
var bcr = img.getBoundingClientRect();
rImg.style.top = bcr.bottom - document.body.clientTop;
rImg.style.left = bcr.left - document.body.clientLeft;
rImg.src = img.src;
rImg.width = img.width;
rImg.height = img.height;
rImg.reflected = true;
document.body.appendChild(rImg);
}
})(this));
}
</style>
<img src=”http://mir.aculo.us/stuff/reflector/wollzelle.jpg” class=”reflect”>
Works only in the best browser since 2000, but it saves you over 100KB of JS and about 100 images.
Thanks to Sjoerd.
[...] Ajaxian » script.aculo.us Reflector A GREAT effect using script.aculo.us (tags: javascript script.aculo.us webdesign ajax prototype) No Tags [...]
I don’t know what’s wrong, but it doesn’t work! I’ll try to fix it!
I can’t get it to work but I guess that’s because I’m using the wrong browser. I’ll try again with Firefox instead and see if it might work.
Desiree, Freelancer currently working on the enhance patch project.
Awesome. JS can make the reflection, i just know.. awesome
—
hair health care project manager