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.

Меню

Главная

Компьютерная помощь
Ремонт компьютеров
Ремонт ноутбуков
Ремонт планшетов
Ремонт apple
Веб-мастерская
Заправка картриджей

Веб-мастеру

HTML (1)
CSS (8)
Java Script (2)
PHP
XML (2)
DLE (2)
Joomla (17)
ModX (1)
WordPress
Drupal (1)

Сис-админу

Windows (18)
*nix (1)
Apple (1)

Контакты

Eduard L.
ICQ: 298-066-983
e-mail: edd15@mail.ru
skype: edduard36
tel: +7 (904) 214 82 20
подробнее


Панель управления

Not registered?