Очередной блог фрилансера

коротко и полезно о веб-разработке

Menu Close

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

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

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

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

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

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

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

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

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Указав значение 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;
}

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Параметры

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

Свойство

Описание

Значение по умолчанию

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

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

Примеры

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

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

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