Что такое 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
