143 Этот jQuery плагин, используя фильтры CSS3, накладывает тилт-эффект на изображения. К сожалению, из-за того, что данный фильтр мало распространен в современных браузерах, то плагин работает только в Chrome & Safari 6.
Как запустить
Применить плагин на любом наборе изображений можно следующим образом:
|
1 2 3 |
jQuery(document).ready(function() { $('.tiltshift').tiltShift(); }); |
Параметры каждого изображения устанавливаются с помощью атрибутов HTML5 следующим образом:
|
1 |
<img src="url" class="tiltshift" data-position="50" data-blur="2" data-focus="10" data-falloff="10" data-direction="y"> |
Эти атрибуты управляют выводом тилт-эффекта.
- -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.
- А какие вы видите варианты решения для остальных браузеров?
