Create Apple style image reflections

Posted 4 months, 3 weeks ago at 10:07 am. 5 comments

Found this very cool script today Reflection.js that will create those funky image reflections that you see on the Apple site. Just download and install this JavaScript into the head section of your web page: 

<script type="text/JavaScript" src="reflection.js"></script> 

To use just add class=”reflect” to your image tags: 

<img src="myimage.jpg" class=”reflect” /> 
 

Try the demo page where you can change the opacity, reflection height, scale, and background colours.

5 Replies

  1. André Santana Dec 23rd 2007

    very nice! =)

  2. alexey Jan 12th 2008

    Have you seen this? A whole lot of AJAX effects including reflections that you described:

    http://miniajax.com/

  3. Camsoft Feb 7th 2008

    No I had not, thanks for the link.

  4. Thibaut Barrère Feb 18th 2008

    Hi Cameron,

    Just discovered your blog. Thanks for the reflection.js link as well as for curvyCorners (I’m using it all over the place)!

  5. Szabolcs Mar 14th 2008

    MegaThanx!

    nagyon köszönöm!


Leave a Reply