tiltShift.js – это некая сенсация. Используя новые фильтры изображений в CSS3, разработчик Ноель Ток (Noel Tock) реализовал эффект tilt-shift, который можно применять к изображениям. Стоит, конечно, сразу отметить, что на момент написания этого текста, эффект работал только в Chrome и Safari 6.
Более того, изображения должны быть подобраны специальным образом. Но все это необходимо ради того, чтобы иметь возможность создавать эффект на уровне того, что получается в 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, и нам кажется, что его ждет большое будущее, так как все больше и больше разработчиков начинают использовать этот эффект в дизайне.
Раздел: Java-Скрипты Нет комментариев
tiltShift.js: эффект tilt-shift на CSS3 и jQuery
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Подробности здесь
Опубликовал Design FactoRy Прочитано (раз): 4214 | Нет комментариев
Автор перевода — CoolWebmasters.Com © | Источник материала / оригинал статьи Распечатать
Автор перевода — CoolWebmasters.Com © | Источник материала / оригинал статьи Распечатать