TiltShift - плагин для создания эффекта размытия RUDEBOXНа качественных фотографиях, вы наверняка замечали, всегда присутствует эффект размытия объектов, или как его еще называют tilt-shift. Это возникает в результате фокусировки на определенном объекте, а все остальное, так называемые, второстепенные объекты остаются без фокуса, и получают эффект расплывчатости. Данный эффект можно сделать если у вас есть камера с хорошим объективом, или сделать сделать с помощью фотошопа, но если вам необходимо сделать временное размытие, которое будет исчезать при наведении курсора мыши.

Для достижения данного эффекта мы будем использовать плагин tiltShift.js. Кроме этого нам понадобятся фильтры CSS3. Следует обратить внимание, что данный эффект является новшеством для браузеров, по этому данный прием будет доступен только в браузерах Chrome & Safari 6. И так, давайте приступим.

Шаг 1. HTML

Нам следует создать простую разметку, которая основана на атрибутах HTML5 data.

Следующий шаг это вызов самого плагина, осуществляем это с помощью команды.

TiltShift - плагин для создания эффекта размытия | RUDEBOX

Опции

Плагин достаточно гибкий, это позволяет его с легкостью настроить, придать необходимые вам значения, для достижения желаемого эффекта.

  • position (0-100): определяет точку фокусировки
  • blur (0-?): размытие в пикселях. 1 или 2 вполне идеальные варианты
  • focus (0-100): область, которая находится в фокусе. 10 будет означать, что попадает одна десятая часть резкости изображения
  • falloff (0-100): область между полным фокусом и полным размытием
  • direction («x» или «y»): направление эффекта по оси

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: