Reflection.js – создание зеркального отражения

Cкрипт Reflection.js позволяет добавлять эффект зеркального отражения к изображениям на web-странице. Эффект создаётся при помощи объекта Canvas на браузерах, которые его поддерживают, в Internet Explorer вместо Canvas использются фильтры Opacity (эффект прозрачности) и FlipV (зеркальное отображение).

Пример использования данного скрипта можно посмотреть здесь.

Установка и настройка скрипта очень проста. Во-первых нужно скачать скрипт reflection.js (http://cow.neondragon.net/stuff/reflection/), затем добавить его в документ:
HTML

И последнее – изображениям, для которых нужно создать отражение, нужно добавить класс reflect.

HTML

Теперь немного о настройке скрипта. По умолчанию размер зеркального отражения равен половине высоты изображения, а уровень прозрачности равен 50%. Чтобы изменить эти параметры, нужно добавить классы rheight и ropacity со значениями высоты и прозрачности:

HTML

Здесь есть одна особенность – если вы зададите высоту больше, чем размер изображения, то в Internet Explorer отражение будет отсутствовать.

Еще нужно учесть преобразования, которые осуществляет скрипт. Изображение помещается в контейнер div, для которого устанавливаются атрибуты style и class изображения. Самому изображению назначается класс reflected. Например, это изображение:

HTML

Будет преобразовано в следующий код:

HTML

Следовательно, устанавливая классы и стили для изображения, мы можем настраивать его расположение на странице.

Как видите, установка скрипта максимально проста, и поддерживается всеми основными браузерами: Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ и Safari.