Главная > Java-Скрипты > tiltShift.js: эффект tilt-shift на CSS3 и jQuery

tiltShift.js: эффект tilt-shift на CSS3 и jQuery


26 сентября 2012, 12:45. Разместил: Design FactoRy
tiltShift.js – это некая сенсация. Используя новые фильтры изображений в CSS3, разработчик Ноель Ток (Noel Tock) реализовал эффект tilt-shift, который можно применять к изображениям. Стоит, конечно, сразу отметить, что на момент написания этого текста, эффект работал только в Chrome и Safari 6.
Более того, изображения должны быть подобраны специальным образом. Но все это необходимо ради того, чтобы иметь возможность создавать эффект на уровне того, что получается в Photoshop и других редакторах.

tiltShift.js: хитрое применение CSS3 Image Filters

Дабы быть честными, jQuery-плагин от Ноеля представляет собой нечто вроде каркаса. Применяемые эффекты работают только в Chrome и Safari, и вам также потребуется подобрать соответствующие изображения. Фото должно быть сделано с довольно дальнего расстояния и хорошего угла. К тому же, субъект должен находиться где-то в центре фото. Конечно же, вы можете применять tiltshift.js к любому фото, но вряд ли получится достичь эффекта.

tiltShift.js: эффект tilt-shift на CSS3 и jQuery

Кроме того, стоит отметить, что маленькая библиотека от Тока предоставляет вам несколько параметров настройки. Параметры выставляются при помощи новых HTML5-атрибутов данных. Используя data-position вы можете определить расположение области на фотографии, которая должна оставаться в фокусе. Валидные значения варьируются от 0 до 100. Значение 50 выровняет область по центру изображения. Комбинируйте этот параметр с data-focus, который также варьируется от 0 до 100, и позволяет вам выставить размер области фокуса. Установив значение 10, вы увидите, что в фокусе остается всего 10 процентов от изображения, а все остальное размывается.

Разобравшись с этими параметрами, пришло время выставить data-blur, который отвечает за радиус, и data-falloff, который отвечает за размер области между полным фокусом и полной размытостью. Для применения эффекта, вы запускаете его в div-оболочку, которая затем оформляется при помощи CSS, чтобы избежать перекрещивания с другими параметрами.

tiltShift.js распространяется под лицензионным соглашением GNU GPL, а значит, вы можете использовать ее бесплатно во всех легальных целях. Проект только недавно был выставлен в Github, и нам кажется, что его ждет большое будущее, так как все больше и больше разработчиков начинают использовать этот эффект в дизайне.
Вернуться назад