Реклама
timeweb
falbar

Эффект зеркального отражения

7 октября 2015 1073 0

Недавно я писал об 3D слайдере (ссылка ниже) и для его работы использовался маленький jQuery плагин reflection – этот скрипт позволяет добавить зеркальное отражение у картинки. Это довольно интересное решение, которое стоит добавить в копилку falbar. Полезность скрипта трудно переоценить: да, если вы прикрутили себе слайдер с пятью изображениями, то картинки можно подготовить и заранее в фотошопе, но если мы подгружаем новые картинки динамически или рандомной выборкой из, скажем, трех-четырех тысяч товаров нашего интернет магазина? Да, работа контент-менеджера встанет в копеечку, и скорее всего вы откажетесь от использования эффекта отражения в своем проекте.

Реклама

Хороший пример использования плагина можно увидеть в статье - 3D слайдер.

Для создания эффекта отражения reflection использует canvas и это стоит учитывать. У reflection есть главная особенность это размер всего 2KB, минимализм кода позволяет его использовать, не нагружая лишний раз страницу.

Для начало работы подключаем скрипты:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="reflection.js" type="text/javascript"></script>

И добавляем HTML разметку. Чтобы применить скрипт к картинке стоит добавить class=reflect:

<img src="img.jpg" alt="Изображение с отражением" class="reflect" />

Вот так просто добавляются отражения к изображениям, но так же можно воспользоваться и новым появившимся методом reflect() с переданными ему параметрами:

  • height – высота отражения;
  • opacity – прозрачность отражения.

К слову, доступен, станет и противоположный метод unreflect() который наоборот удаляет зеркальное отображение у элемента.

Реклама
Комментариев еще не оставлено
no_avatar