tilt

tiltShift.js

Этот jQuery плагин, используя фильтры CSS3, накладывает тилт-эффект на изображения. К сожалению, из-за того, что данный фильтр мало распространен в современных браузерах, то плагин работает только в Chrome & Safari 6.

Пример Скачать

Как запустить

Применить плагин на любом наборе изображений можно следующим образом:

Параметры каждого изображения устанавливаются с помощью атрибутов HTML5 следующим образом:

Эти атрибуты управляют выводом тилт-эффекта.

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

Замечания

  • Как отмечалось ранее, в настоящее время поддерживается только Chrome и Safari 6. CSS3 фильтры не поддерживается браузерами Firefox / Mozilla, для них нужен вариант с использованием SVG.
  • А какие вы видите варианты решения для остальных браузеров?


Оставить комментарий