Сегодня я представляю вашему вниманию скрипт Reflection.js, который позволяет добавлять эффект зеркального отражения к изображениям на web-странице. Эффект создаётся при помощи объекта Canvas на браузерах, которые его поддерживают, в Internet Explorer вместо Canvas использются фильтры Opacity (эффект прозрачности) и FlipV (зеркальное отображение). Конечный результат выглядит следующим образом:
Установка и настройка скрипта очень проста. Во-первых нужно скачать скрипт reflection.js, затем добавить его в документ:
<script src="reflection.js" type="text/javascript"></script>
И последнее – изображениям, для которых нужно создать отражение, нужно добавить класс reflect.
<img src="my_image.jpg" class="reflect" />
Теперь немного о настройке скрипта. По умолчанию размер зеркального отражения равен половине высоты изображения, а уровень прозрачности равен 50%. Чтобы изменить эти параметры, нужно добавить классы rheight и ropacity со значениями высоты и прозрачности:
<img src="my_image.jpg" class="reflect rheight34 ropacity60" />
Здесь есть одна особенность – если вы зададите высоту больше, чем размер изображения, то в Internet Explorer отражение будет отсутствовать.
Еще нужно учесть преобразования, которые осуществляет скрипт. Изображение помещается в контейнер div, для которого устанавливаются атрибуты style и class изображения. Самому изображению назначается класс reflected. Например, это изображение:
<img src="my_image.jpg" class="reflect rheight34 ropacity60 my_class" style="float:left;margin:0 4px"/>
Будет преобразовано в следующий код:
<div class="my_class" style="float:left;margin:0 4px"> <img class="reflected" src="my_image.jpg" /> <canvas/> </div>
Следовательно, устанавливая классы и стили для изображения, мы можем настраивать его расположение на странице.
Как видите, установка скрипта максимально проста, и поддерживается всеми основными браузерами: Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ и Safari. И напоследок, если вы хотите узнать больше, добро пожаловать на сайт проекта: Reflection.js.
Удачи!
