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

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

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

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

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

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

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

 jQuery("#text").okshadow({
        textShadow: true
 });

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

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

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

Параметры

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

Свойство	Описание	Значение по умолчанию
color	цвет тени	#888
fuzz	радиус размытия, в зависимости от расстояния мыши	40
fuzzMin	минимальный радиус размытия в пикселях	0
fuzzMax	максимальный радиус размытия в пикселях	null
xOffset	смещение тени по горизонтали	0
xFactor	позиция размытия в зависимости от расстояния мыши, по горизонтали	30
xMax	ограничение горизонтального смещения тени, в пикселях	null
yOffset	смещение тени по вертикали	0
yFactor	позиция размытия в зависимости от расстояния мыши, по вертикали	30
yMax	ограничение вертикального смещения тени, в пикселях	null
textShadow	применяет тень к тексту, если свойство не указано, тень применяется к контейнеру текста (box-shadow)	false
transparent	делает цвет текста прозрачным, для создания эффекта призрачного текста	false

Методы

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

$('#ok').okshadow();
$('#ok').data("okshadow").setoption({
  "color": "red",
  "fuzzMin": 10,
});

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

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();     

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

Примеры

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

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

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

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