Compared to the original reflection.js, this script has the following added features:
- The reflections appear instantly under each image as soon as it completes loading, instead of having to wait for all images of the page to be loaded before seeing all reflections being applied at the same time. This provides a much better user experience.
- The code is smaller than the original reflection.js and has been optimized for MooTools. If you are already using MooTools, you will gain a few kilobytes.
- The code has a few bugfixes that the original script doesn’t have. It usually works better.
- It allows you to specify a fixed height or a relative height for the reflection.
Like the original reflection.js, this script is much faster than the script.aculo.us Reflector script (which is not suited for production use), because it does not create a large number of image zones (one for each pixel line). Instead, it uses the canvas tag available in most modern browsers, and DirectX image transformation filters in Internet Explorer, so the reflection image is drawn natively in one step.
This script works in all browsers supporting the canvas tag: Firefox 1.5+, Opera 9+, Safari 2+, Camino, Google Chrome and Internet Explorer 9+. It also works in Internet Explorer 6-8 by using an alternative drawing technique.
In older browsers, the script will degrade automatically (the images will remain untouched).
The latest version of Reflection.js for MooTools (obviously) requires the MooTools framework, version 1.3 or version 1.2. Because MooTools is modular, you can make your download smaller by only downloading the modules your scripts are actually using. Here are the modules required by this script:
Just include the script in the header of your page, after the inclusion of the MooTools framework:
Reflections can be added to any image tag over any kind of background (even image backgrounds!). There are two ways of adding a reflection:
1) Using HTML, by applying a CSS class named “reflect” to your images:
This will use the default reflection parameters (see below). You can apply multiple classes to an image (separated by spaces), the script will detect if “reflect” is one of them.
(this last example requires that you include MooTools selectors in your MooTools build)
“options” is an optional argument similar to the other options arguments in MooTools. The following options are available:
- height: The height of the reflection. It can be proportional or fixed. If the value is included between 0 and 1, it is considered as proportional to the image’s height (where 1 means 100%). If the value exceeds 1, it is considered as a fixed height, in pixels. Note that the reflection will never be taller than the image, even if this value exceeds the image’s height. Default is 1/3 (proportional).
- opacity: The starting opacity of the reflection (range: 0 to 1). The reflection is shown as an opacity gradient going from this value to 0. Default is 1/2.
If you call this method more than once for the same image, the previous reflection will be automatically replaced by the new one.
When adding the reflection effect, the script wraps the image inside a
<div> block and adds the reflection to the same block, just below the original image. The
style attributes of the image will be set blank and applied to the div instead, so the whole block will show like the original image. This operation is reverted when removing the reflection.
This means that you can style the mirrored images using CSS classes and using their
style attribute, but you can not style the
img tag directly.
For example, when reflected, the following image will not display properly because it is using a CSS rule mentioning the
Instead, you must use a CSS class without referring to the
img tag (or use the style attribute) and it will display like expected:
Also, the reflection will display properly with block-style images, but not with inline-style images. If you apply it to an inline-style image, it will be transformed to a block-style image. Most websites use only block-style images, so it should not be a problem.
Finally, you must not specify the height of the reflected image using a CSS
style property, because the height will increase when the reflection will be applied. Set the
height attributes on the
<img> tag instead if you want to (it’s optional).
Reflection.js for MooTools is free software released under MIT License.
If you like it, talk about it and promote it by linking to this page.
Deprecated but still available:
- Updated code for MooTools 1.3.
- Canvas rendering is now used in Internet Explorer 9 in standards mode.
- Improved compatibility with Internet Explorer legacy mode (credits to Peter Toth).
- Updated the provided MooTools build to v1.2.5 for the MooTools 1.2 version.
- Added the ability to specify a fixed height, in pixels, for the reflection.
- Better usage of variables resulting in a smaller minified file size.
- Updated the provided MooTools build to v1.2.4.
- The “reflected” class is now applied to the img tag while the image is reflected.
- Small code optimizations.
- The script will not hang anymore when one of the images to reflect cannot be loaded.
- Updated the provided MooTools build to v1.2.1.
v1.4 (2008-06-10), requires MooTools >= 1.2.
- Updated code for MooTools 1.2.
- Brand new code, smaller and more compatible.
- Reflections appear earlier and more consistently during page load.
- New simpler API (see documentation).
- Fixes the issue with linked images and Internet Explorer.
- Fixes the issue with spaces between the image and the reflection in some cases.
- The distribution file now includes MooTools.
v1.2 (2007-05-29), requires MooTools >= 1.1.
- Updated code for MooTools 1.1.
v1.1 (2007-02-05), requires MooTools >= 1.0.
- Updated code for MooTools 1.0.
- Fixed an issue where some reflections were wrongly sized at first display in Internet Explorer only.
v1.0 (2006-10-30), requires MooTools >= revision 83.
- Initial release.