Приветствую всех, кто читает данную статью!

Представляю Вашему вниманию свой новый плагин для популярной JS библиотеки jQuery. А называется он — Parallax Shadow on jQuery. Просто и пафосно одновременно.

Описание: после применения плагина выбранный(-е) элемент(-ы) на странице начинает(-ют) отбрасывать тень в зависимости от положения указателя мыши на нем(-их), как будто мы светим фонариком. Отбрасывать тень может либо текст, либо любой контейнер.

Скачать плагин:

• jQuery.pShadow.js
• jQuery.pShadow.min.js

Для работы плагина подключим его и библиотеку jQuery:

<script src="http://yandex.st/jquery/1.6.1/jquery.min.js" type="text/javascript">
</script>
<script type="text/javascript" src="js/jquery.pshadow.js">
</script>

Пользоваться данным плагином очень просто, ровно как и любым другим плагином. Чтобы элемент отбрасывал интерактивную тень, достаточно написать строчку кода:

<script type="text/javascript">
$(document).ready(function(){
  $("#example").shadow();
});
</script>

#example — элемент, которому мы хотим задать динамичную тень. По умолчанию (вызов без параметров) тень будет сдвигаться только на 1 пиксель, степень размытости 1, цвет #333. Важно! По умолчанию тень задается для текста.

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

<script type="text/javascript">
$(document).ready(function(){
  $("#example").shadow({
		type : "text",
		sX : 5,
		sY : 8,
		blur : 3,
		color : "#567",
		inset : false,
		invert : true
	});
});
</script>

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

type — строка: “text” – для создания тени текста; “box” – для создания тени контейнера (блочного, инлайнового элемента)

sX — число: Определяет размах движения тени по горизонтали. От –sX/2 до sX/2

sY — число: Определяет размах движения тени по вертикали. От –sY/2 до sY/2

blur — число: Задает степень размытости тени. Чем больше значение, тем больше размыта тень

color — строка: Определяет цвет тени. Принимает цвет в формате “#xxxxxx” и “#xxx”

inset — логическая переменная: переключает внешнюю тень элемента на внутреннюю (true – тень внутри; false – тень снаружи (по умолчанию)). Работает в том случае, если “type”:”box”

invert — логическая переменная: инвертирует направление смещения тени (true – движение тени инвертировано; false – движение тени не инвертировано(по умолчанию) )

Плагин корректно работает во всех современных браузерах (проверял на последних версиях). Серьезные проблемы только в IE: IE8 – практически не работает, IE9 –корректно работает для отображения теней у элементов контейнеров (box-shadow).
Работа над плагином продолжается, с радостью приму советы по устранению косяков.

Варианты и примеры использования находятся на демонстрационной страничке.

С замечаниями и предложениями писать на email: mitrofanovnk[at]gmail.com
Удачи!

Демо