Thursday, April 27th, 2006

script.aculo.us Reflector

Category: Examples, Prototype, Showcase

<>p>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
< view plain text >
  1. var Image = {
  2.   reflect: function(element) {
  3.     element = $(element);
  4.     options = $H({
  5.       amount: 1/3,
  6.       opacity: 1/3
  7.     }).merge(arguments[1] || {});
  8.    
  9.     if(!element.complete) {
  10.       setTimeout(function(){Image.reflect(element,options)}, 10);
  11.       return;
  12.     }
  13.    
  14.     var p = element.parentNode, n = element.nextSibling;
  15.     var d = 1.0/(element.height*options.amount);
  16.      
  17.     (element.height*options.amount).times( function(line) {
  18.       var h = Builder.node('div',{style:'height:1px;overflow:hidden'},
  19.         [Builder.node('img',{src:element.src,
  20.           style:'margin-top:-'+(element.height-line-1)+'px'
  21.         })]);
  22.       p.insertBefore(h,n);
  23.       $(h).setOpacity((1-d*line)*options.opacity);
  24.     });
  25.   }
  26. }
  27.  
  28. Image.reflect('wollzelle');

script.aculo.us Reflector

Posted by Dion Almaer at 9:31 am
23 Comments

++++-
4 rating from 105 votes

23 Comments »

Comments feed TrackBack URI

Not working in Safari.
AWESOME when it does work!!!!

Comment by Mike Caputo — April 27, 2006

Oh, and one more thing – spelling error: “Not Thomas Fuchs…” should be “Now Thomas Fuchs…”

Comment by Jeffrey — April 27, 2006

Some contrast, please.
Reflection’s too dark to apreciate correctly in a bright room. I almost missed the effect completely.

Comment by Gonzalo — April 27, 2006

Very cool. Unfortunate variable naming though, as it overwrites the Image object. So “new Image()” no longer works. :(

Comment by Mike — April 27, 2006

Scriptaculous has fallen out of favor with me since the new version is broken in gecko browsers

Comment by Bjorn — April 27, 2006

Also that doesn’t work with me in Epiphany 2.14, a gecko browser.

Comment by Bjorn — April 27, 2006

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?

Comment by Dan — April 27, 2006

@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….?

Comment by Thomas Fuchs — April 27, 2006

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.

Comment by Chris Heilmann — April 27, 2006

[...] Check it out here. Don’t overuse it. Use it for good, not evil. [...]

Pingback by Digitaria Blog » Blog Archive » “That reflector is dope!” — April 27, 2006

Great and simple!

Comment by Piotr Usewicz — April 27, 2006

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.

Comment by Dan — April 27, 2006

That dude on the right is PIMP

Comment by Jimmy — April 27, 2006

@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.

Comment by henrah — April 27, 2006

Thats really nice work, really nice.

Comment by Hubris Sonic — April 27, 2006

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.

Comment by Jonathan — April 27, 2006

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.

Comment by Mario — April 27, 2006

[...] Scriptaculous Reflector >> L’article sur Ajaxian >> [...]

Pingback by Frato blog » script.aculo.us Reflector, reflet d’image — April 28, 2006

i want to have this file in a zip format can you email me.

Comment by tejas lakhani — April 28, 2006

[...] Ajaxian » script.aculo.us Reflector pretty cool and completely useless! [...]

Pingback by Ajaxian » script.aculo.us Reflector at blackrimglasses.com — April 28, 2006

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.

Comment by Lon — April 29, 2006

[...] Ajaxian » script.aculo.us Reflector A GREAT effect using script.aculo.us (tags: javascript script.aculo.us webdesign ajax prototype) No Tags [...]

Pingback by links for 2006-04-28 at Brandon’s Blog — May 2, 2006

I don’t know what’s wrong, but it doesn’t work! I’ll try to fix it!

Comment by Matthias — July 8, 2007

Leave a comment

You must be logged in to post a comment.