—»     —»   tiltShift.js: эффект tilt-shift на CSS3 и jQuery
  Раздел: Java-Скрипты   Нет комментариев  

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



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, и нам кажется, что его ждет большое будущее, так как все больше и больше разработчиков начинают использовать этот эффект в дизайне.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS, jQuery, javascript, Tilt-Shift
Опубликовал Design FactoRy   Прочитано (раз): 4070   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц November по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930