Эффект отражения с помощью JavaScript

Вторник, 27 мая 2008

Эффект отражения с помощью JavaScript

Путешествуя по сети, наткнулся на довольно интересный сервис, который позволяет создавать модный в эпоху Web 2.0 эффект отражения для изображений (эффект мокрого пола) с помощью JavaScript. В принципе, вся информация, как и собственно сервис, находятся на сайте cow.neondragon.net.

Для тех же, кому лениво читать по-буржуйски, приведу краткую инструкцию к использованию.

Подключение:

Во-первых, качаем сам скрипт отсюда. Весит он всего 5 KB, что конечно же только в плюс.

Затем подключаем .js к нашей страничке. Кто не в курсе:

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

Использование:

Далее, к тегу того изображения, которое мы собираемся «отзеркалить» приписываем класс «reflect»:

<img src="giraffe.jpg" class="reflect" width="100" height="100" alt="Giraffe" />

Вот и все, теперь перезагружаем страницу и любуемся красотой.

Настройка отражения:

Если Вас не устраивает полученный результат, то подстроить параметры отражения можно двумя способами:

1. Непосредственно в .js-файле можно настроить параметры высоты и прозрачности отражения:

1
2

defaultHeight : 0.5, //высота новой картинки-отражения
defaultOpacity: 0.5, //прозрачность отражения

2. C помощью CSS (этот способ более гибкий, так как позволяет применять к разным изображениям разные параметры).

Здесь нужно просто приписать к названию класса нужное значение параметра и цифры (которые соответствуют значению параметра в процентах). Например, чтобы высота отражения составляла 33% от изображения нужно написать:

<img src="giraffe.jpg" class="reflect rheight33" width="100" height="100" alt="Giraffe" />

Также можно настроить и прозрачность (например 30%):

<img src="giraffe.jpg" class="reflect ropacity30" width="100" height="100" alt="Giraffe" />

Страничку с примерами можно посмотреть тут.

Креативно использовать этот эффект можно, например, для аватар пользователей на блогах и форумах, а не только для статичных фоток на сайтах.

Теги: , , .

Категория: HTML/CSS верстка, JavaScript, Полезности.

* * *

Понравилась статья?

Тогда помогите мне сделать её доступной для других, или будьте в курсе последних событий:

* * *

Статьи по теме:

Комментариев: 4

  1. Timofeus, 28.01.2009 в 16:03

    Не всё работает в Firefox и совсем не работает в Google Chrome и Опере.

    Ответить

  2. rotor, 29.01.2009 в 16:37

    Timofeus, в примере-оригинале всё работает, просто у меня что-то слетело. Не пугайте народ :)

    Спасибо за наводку, подправлю.

    Ответить

  3. Наталия, 02.06.2009 в 10:26

    Не работает в IE6, на той страничке что я делаю. скрипты взяла верно, но что-то не то :( Может кто-нибудь знает что может влиять?

    Ответить

  4. Igor, 15.03.2010 в 23:37

    Странный косяк... все брал с исходника , там и в мозиле и в опере все ок, а вставляю в сайт — только в осле работает... уже и все css и js отрубал — не помогает... ))) но полюбому буду мозги насиловать — разбираться

    Ответить

Есть что сказать?