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

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


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

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

<script src="/reflection.js" type="text/javascript"></script>


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

HTML

<img src="/my_image.jpg" class="reflect" />


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

HTML

<img src="/my_image.jpg" class="reflect rheight34 ropacity60" />


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

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

HTML

<img src="/my_image.jpg" class="reflect rheight34 ropacity60 my_class" style="float:left;margin:0 4px"/>


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

HTML

<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.

Меню

Главная

Компьютерная помощь
Ремонт компьютеров
Ремонт ноутбуков
Заправка картриджей

Сис-админу

Ноутбуки (11)
Windows (22)
*nix (1)

Веб-мастеру

HTML (7)
CSS (10)
Java Script (2)
XML (2)
DLE (2)
Joomla (17)
ModX (1)
Drupal (1)

Контакты


+7 (904) 214 82 20
подробнее