Сегодня я представляю вашему вниманию скрипт 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.
Удачи!

Запись добавлена 16 февраля 2008 в категории Эффекты.Вы можете следить за комментариями используя ленту новостей RSS 2.0.Вы можете оставить комментарий, или отправить trackback со своего сайта.