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

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

Слайдер карусель

7 октября 2015 Антон Кулешов

Желание выделиться и огромная конкуренция вынуждает веб-мастеров делать сайты интересными и запоминающимися. Трудно представить, сколько времени, зачастую, тратится на то, чтобы придать странице особый шарм. И сегодня я хочу рассказать про jQuery плагин Cloud 9 Carousel – это скрипт, которой позволяет сделать 3D слайдер карусель.

Прелоадер с SVG анимацией

8 ноября 2015 Антон Кулешов

Мы живём в эпоху, когда в интернете можно делать все: работать, отдыхать, играть, покупать и продавать, «готовить» еду, заниматься сексом и т.д.. Стандартный рабочий софт так же перекочевал онлайн. Практически любое приложение, будь то графический редактор, читалка-распознавала, просто удобный блокнот, давно обзавелись своей облачной версией. Ну что же, рядовому веб разработчику не гоже отставать от современных тенденций, и если вы решили обзавестись своим онлайн сервисом, то вам просто не обойтись без прелоадера.

Ajax-загрузка данных на сервер

16 июля 2015 Антон Кулешов

Хороший скрипт – это инструмент, который сэкономит вам массу времени и нервных клеток при разработке веб-приложения. По своему опыту создания сайтов знаю, что значительную часть времени приходиться тратить именно на поиск готовых «велосипедов» и решений, которые упрощают нашу работу. Сегодня мы затронем одну из важнейших тем – загрузка файлов или картинок на сервер при помощи ajax. И, хотя есть множество статьей и скриптов, я расскажу своё видение данной проблемы и её решения у себя в проекте.