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

7 октября 2015 Антон Кулешов 923 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
Читайте далее

Прогресс бар заполнения формы

15 июня 2016 Антон Кулешов

Необходимость заполнения длинных форм, зачастую, очень не нравится пользователям. Чтобы как-то снивелировать негативный эффект можно прикрепить к форме анимированный прогресс бар её заполнения. Сегодня речь пойдёт об JavaScript библиотеке под названием fort.

Эффект падающего снега на jQuery

13 декабря 2014 Антон Кулешов

Эффект плавно падающего снега точно привлечёт внимание пользователя, зашедшего к вам на сайт. Если вы хотите добавить что - то подобное, то вам наверняка пригодится плагин под названием snow. Примечателен данный эффект падающего снега тем, что в качестве снежинок используются текстовые символы, из чего делайте вывод: падать могут не только снежинки, а любой символ, подходящий под стилистику вашего сайта.

Новостная лента на jQuery

14 декабря 2014 Антон Кулешов

Если у вас возникла необходимость добавить на сайт блок со сменяющимся контентом – новостную ленту, но желания писать свой скрипт у вас нет, то в этой статье вы узнаете о решении, которое позволяет осуществить это в несколько строчек jQuery кода.