tiltShift.js — jQuery-плагин для эффекта tilt-shift

в 3:28, , рубрики: css, css3, jquery, tilt-shift, Веб-разработка, метки: , ,

image Что такое tilt-shift? Эффект tilt-shift называется еще эффектом миниатюры — суть заключается в том, что бы поместить точку фокуса на какой-то один объект на фото и размыть окружение.

Существовало множество решений для этого — от плагинов для Photoshop и фильтра в Instagram до отдельных программ.

От переводчика: на мой взгляд, данный плагин является великолепным примером для демонстрации возможностей фильтров в CS33

Встречайте: tiltShift.js!

Это плагин для jQuery, который использует фильтры на CSS3 для создания tilt-shift эффекта. Это всего лишь «proof of concept» и работает только в Chrome & Safari 6.

На странице плагина можно глянуть примеры (с оригиналами фотографий).

Использование

Вызовите плагин

jQuery(document).ready(function() {
     $('.tiltshift').tiltShift();
});

Настройка осуществляется через HTML5 data-атрибуты, пример:

<img src="url" class="tiltshift" data-position="50" data-blur="2" data-focus="10" data-falloff="10" data-direction="y">

Полный список:
-position (0-100): определяет точку фокусировки
-blur (0-?): размытие в пикселях. 1 или 2 вполне идеальные варианты
-focus (0-100): область, которая находится в фокусе. 10 будет означать, что попадает одна десятая часть резкости изображения
-falloff (0-100): область между полным фокусом и полным размытием
-direction («x» или «y»): направление эффекта по оси

Замечания

  • Как было раньше сказано, данный плагин работает только в Chrome и Safari 6. CSS3-фильтры не поддерживаются большим количеством браузеров.
  • Оберните <img> родительским <div>, таким образом вы можете применить те же атрибуты к классу .tiltshift-wrap
  • Пулл-реквесты? О да, автор будет счастлив увидеть поддержку для бо’льшего количества браузеров

Скачать

Скачать можно здесь а исходный код доступен на Гитхабе под лицензией GPL

Автор: theaqua

Поделиться

* - обязательные к заполнению поля