3d image reflection with javascript
November 5, 2007
After the image transisition manager we released last week, this week an image reflection script, using unobtrusive javascript. By adding a small piece of javascript to your code you can create this stunning effect. It offers a solution that is:
- Not involved with Flash, or
- with CSS, and
- cross browser (Tested in Firefox, Opera and IE)
- Preloading the images before reflection
Here is a demo on black and on white.
How to use?
First, you have to include prototype, script.aculo.us builder and the reflection script in your html:
<script src="javascript/prototype.js" type="text/javascript"></script> <script src="javascript/scriptaculous.js?load=builder" type="text/javascript"></script> <script src="javascript/reflection.js" type="text/javascript"></script>
Then, create an holder div in which the image element is included:
<div id = "holder"> <img src = "image.jpg" /> </div>
The last step is to create an instance of the reflection3d class:
<script type="text/javascript">
new Reflect3D('holder');
</script>
The first parameter is the id of the holder-div.
Where can I download it?
Download the full package here.
Enjoy!
Add to:
[…] una vuelta de tuerca más a los reflejos de tus imagenes con 3D Reflection. Un script que necesita de prototype + script.aculo.us para hacer posible esta opción, pero que […]
Pingback by Reflejos 3D en nuestras imagenes con Javascript | aNieto2K — November 5, 2007 @ 11:48 pm
Looks neat, although I would change your holder div, to use a class attribute, rather than an id. This would allow you to have more than one image with the reflection. (you’d need to change your DOM nav stuff too, but that would be fairly easy)
Comment by steve — November 6, 2007 @ 4:43 pm
Hi Steve,
Thanks for your comment. I agree with that it is better when using the class name. Instead you can create multiple instances of Reflect3D to create more image reflections on one page.
Comment by Willem — November 7, 2007 @ 2:12 am
[…] vous suffira d’ajouter ces petits bouts de code sur vos sites pour obtenir un zouli effet sur vos images. L’implémentation est simple, […]
Pingback by Un effet reflet 3D sur vos images via javascript » Homo Sapiens Internetus » Blog Archive — November 8, 2007 @ 10:01 am
[…] 3d image reflection with javascript （http://ajaxorized.com/3d-image-reflection-with-javascript/） 下のほうにある[Download the […]
Pingback by » reflection.js（Apple風鏡面効果）を使う。(1) 寺子屋未満: 最新Web情報をコツコツお届け — November 18, 2007 @ 9:56 am
Hi Steve,
I like your idea to have class holder instead of ID.
However, I’m not that good to change the DOM nav that you prefer.
Would you show me which part of the code that I should make change if you have time?
I appreciate your help.
Thanks
Alex
p.s.
Or Anybody can help me with this: create more image reflect in one page. Thanks.
Comment by Alex — November 22, 2007 @ 1:44 am
[…] encontrará um exemplo e os códigos para download na página ajaxorized.com/3d-image-reflection-with-javascript/. Compartilhe esta notícia […]
Pingback by Reflexo em 3D em imagens usando javascript - Planeta Informática — December 29, 2007 @ 4:45 am
Thank you, looks good, although in the real world reflections don’t have perspective on them, only shadows do. Try it with a mirror or shiny surface and you will see. You could say it is a projection, where the light is shone through the image and projected on the surface.
Sorry, I am very picky about these things
Nice work though.
Comment by Joe — June 6, 2008 @ 12:57 am
cool dude.. its awesome..
Comment by shelly — June 24, 2008 @ 11:26 am
Dear..
how to use reflection image using ajax…
the reflection does not appear when i use it by ajax, I want to display some image using ajax request example list images in outputimage.php on the main page…
but when i open outputimage.php without ajax on IE or Firefox directly replection is display…
Please could you like share all of you of hands to me?
thanks…
Best Regards
Saiful Amri
Comment by saiful — October 16, 2008 @ 8:35 am
Hi Saiful,
I am not really sure what you mean, can you give a better explanation please?
Thanks
Comment by Willem — October 16, 2008 @ 7:31 pm
Dear Willem and all…
I mean that..
I get all of images is from database and they are displayed with reflection correctly (it is called outputimage.php no ajax) but when I request the outputimage.php using ajax request all of images is displayed but does not have reflection…
I am sorry if my english bad…
Best Regards
Saiful Amri
Comment by saiful — October 17, 2008 @ 5:10 am