Показать Меню
falbar Эффект отражения

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

Эффект отражения

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

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

Для создания эффекта отражения reflection.js использует canvas и это стоит учитывать. У reflection.js есть главная особенность это размер всего 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() который наоборот удаляет зеркальное отображение у элемента.

Источник
digitalia.be

Подписаться на обновления

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