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