07 октября 2015
.
Антон Кулешов
Эффект зеркального отражения
Недавно я писал об 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() который наоборот удаляет зеркальное отображение у элемента.
