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

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

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

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

Встречайте: tiltShift.js ^[4]!

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

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

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

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

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
• Пулл-реквесты? О да, автор будет счастлив увидеть поддержку для бо’льшего количества браузеров

Скачать

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

Автор: theaqua