Thursday, April 27th, 2006
script.aculo.us Reflector
Category: Examples, Prototype
, Showcase
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');
-
Related Content:
4.1 rating from 100 votes
Not working in Safari.
AWESOME when it does work!!!!
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
@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!