OKShadow – создаем движущуюся тень.

Те, кто следит за мной в твиттере, видели, что на днях я публиковала ссылку на музей исчезающих звуков, где помимо забавного содержимого сайта, мне на глаза попался интересный эффект следующей за курсором тени. Вся магия этого эффекта реализуется  с помощью jquery-плагина Okshadow, разработанного компаний Okfocus, о нем и пойдет речь в сегодняшней статье. 

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

Использование

По умолчанию OKShadow работает только для блоков:

[javascript]
jQuery("#one").okshadow({
fuzz: 10,
xOffset: 30,
yOffset: 30
});
[/javascript]

С текстом плагин тоже умеет работать, для этого достаточно указать специальное свойство. Единственная разница в сравнении с блоком – нельзя указать размер и движение тени.

[javascript]
jQuery("#text").okshadow({
textShadow: true
});
[/javascript]

Указав значение transparent, можно создать эффект призрачного текста, текст получится невидимым, но останется его тень. Дополнительный CSS-код придает тексту резкость при наведении мыши, а свойство fuzzMin сохраняет размытие остальных параграфов, используйте !important.

[javascript]
jQuery("#ghost-text").okshadow({
textShadow: true,
transparent: true
});
[/javascript]

[css]
#ghost-text p:hover{
color: #000 !important;
text-shadow: none !important;
cursor: pointer;
}
[/css]

Параметры

Плагин можно легко настроить по собственному вкусу, вот список доступных параметров:

Методы

OKShadow имеет один метод setoption, для изменения параметров после инициализации. Он принимает в качестве аргументов хэш параметров или отдельную строку ключ = значение.

[javascript]
$(‘#ok’).okshadow();
$(‘#ok’).data("okshadow").setoption({
"color": "red",
"fuzzMin": 10,
});
[/javascript]

С помощью этого метода создан один из примеров с официального сайта плагина, эффект неонового текста:

[javascript]
jQuery("#neon").okshadow({
color: ‘red’,
textShadow: true,
fuzzMin: 0,
xMax: 10,
yMax: 10,
transparent: true
});

var okshadow = jQuery("#neon").data("okshadow"), //получаем объект okshadow
delay = 100, //скорость смены цветов
hue = 0, //цвет
fuzz = 5, //радиус размытия
fuzzMax = 10, // максимальный радиус размытия
fuzzDir = false; // переменная влияющая на смену радиуса размытия

var loop = function (){
if(fuzz >= fuzzMax || fuzz === 0) //если начальный радиус размытия больше максимального или равен нулю
fuzzDir = !fuzzDir; //присваиваем переменной значение, противоположное текущему

fuzz += fuzzDir ? 1 : -1; //изменяем радиус размытия, согласно переменной fuzzDir,
//если true – прибавляем единицу, если false – отнимаем единицу

hue += 5; //присваиваем начальное значение цвета 5
hue %= 360; //и получаем остаток от деления на 360, для генерации цветовых значений

if(hue == 80) //при получении зеленого цвета
hue += 75; //заменяем его на другой оттенок

jQuery("#neon").css("color", "hsla(" + hue + ",100%, 50%, 0.1)" ); //назначаем цвет текста через CSS-свойство color

okshadow.setoption({
"color" : "hsl(" + hue + ",100%, 50%)", //изменяем цвет тени
"fuzzMin" : fuzz //и радиус размытия
});

setTimeout(loop, delay); //устанавливаем запуск функции по таймеру
};
loop();
[/javascript]

Однажды, я уже публиковала пример неонового текста, как вы считаете какой из них лучше?

Примеры

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

• Пейзаж  (не работает в опере)
• Пирамида
• Квадраты
• Линии
• Точки (не работает в опере, да и в фаерфоксе заметно тормозит)
• Неон (тот самый пример что мы рассматривали выше, но в другом оформлении)

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

Репозиторий на гитхабе.