Более того, изображения должны быть подобраны специальным образом. Но все это необходимо ради того, чтобы иметь возможность создавать эффект на уровне того, что получается в Photoshop и других редакторах.
tiltShift.js: хитрое применение CSS3 Image Filters
Дабы быть честными, jQuery-плагин от Ноеля представляет собой нечто вроде каркаса. Применяемые эффекты работают только в Chrome и Safari, и вам также потребуется подобрать соответствующие изображения. Фото должно быть сделано с довольно дальнего расстояния и хорошего угла. К тому же, субъект должен находиться где-то в центре фото. Конечно же, вы можете применять tiltshift.js к любому фото, но вряд ли получится достичь эффекта.
Кроме того, стоит отметить, что маленькая библиотека от Тока предоставляет вам несколько параметров настройки. Параметры выставляются при помощи новых HTML5-атрибутов данных. Используя data-position вы можете определить расположение области на фотографии, которая должна оставаться в фокусе. Валидные значения варьируются от 0 до 100. Значение 50 выровняет область по центру изображения. Комбинируйте этот параметр с data-focus, который также варьируется от 0 до 100, и позволяет вам выставить размер области фокуса. Установив значение 10, вы увидите, что в фокусе остается всего 10 процентов от изображения, а все остальное размывается.
Разобравшись с этими параметрами, пришло время выставить data-blur, который отвечает за радиус, и data-falloff, который отвечает за размер области между полным фокусом и полной размытостью. Для применения эффекта, вы запускаете его в div-оболочку, которая затем оформляется при помощи CSS, чтобы избежать перекрещивания с другими параметрами.
tiltShift.js распространяется под лицензионным соглашением GNU GPL, а значит, вы можете использовать ее бесплатно во всех легальных целях. Проект только недавно был выставлен в Github, и нам кажется, что его ждет большое будущее, так как все больше и больше разработчиков начинают использовать этот эффект в дизайне.
