With Moo.flection you can easily add a Javascript/CSS based cross-browser reflection with true transparency to you images.

It’s based on the Mootools Javascript Framework.

Version number is 0.1 since it’s far from finished. A lot of options for implementation should be added and the code has to be optmized for a real release.

Implementation

You will need mootools v1.1 or higher and moo.flection.js
Example 1

This is the most simple and basic version. All images within any type of block element with the ID ‘reflections’ will gain a nice reflection.
Javascript:

  // create a new instance for reflections.
var myReflection = new Reflection(
	'simple_reflection',
); 

HTML:

  <div id="simple_reflection">
	<img src="./hella_floor.jpg" alt="Hella On Floor"/>
	<img src="./sea.jpg" alt="Sea"/>
</div>   

So if we have an image with the following Javascript, CSS and HTML:
Javascript:

 // create a new instance for reflections.
var myReflection = new Reflection(
	'css_copied_reflection',
);  

CSS

  .funnyimage {
	float: left;
	margin: 50px 10px 30px 20px;
	padding: 5px;
	background: #ff0;
	border: 3px solid #f00;
	border-right: 5px dotted #0f0;

}   

HTML:

 <div><img src="./hella_floor.jpg" alt="Hella On Floor" class="funnyimage"/></div>
<div id="css_copied_reflection"><img src="./hella_floor.jpg" alt="Hella On Floor" class="funnyimage"/></div>   

Demo: http://www.setragasj.nl/mooflection/
Download: http://www.setragasj.nl/mooflection/js/moo.flection.js
Source: http://www.setragasj.nl/mooflection/

Related Listings:

1. Reflection for MooTools Script This is an improved version of the reflection.js script rewritten...
2. Ajax Script – Refelection on Your Images Reflection.js works with your images, logos, icons and dynamic image...
3. Add Reflection with Reflection.js 1.6 Reflection.js allows you to add reflections to images on your...
4. FormCheck – Mootools plugin You can perform check during the datas entry or on...
5. Milkbox using Mootools As long as I’ll have the time to do it,...

Do you like this post?

Email: