Архив метки: jquery

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

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

Примеры

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

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

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

10 отличных jQuery-сниппетов

jQuery вдохнул новую жизнь в JavaScript-программирование. Благодаря этому замечательному инструменту, появилась возможность с легкостью создавать мощные и интерактивные страницы. В сегодняшней статье собраны 10 полезных примеров jQuery-кода, которые обязательно вам пригодятся при разработке клиентской стороны сайта. Читать далее 10 отличных jQuery-сниппетов

Эффект неонового текста с помощью CSS и JQuery

В сегодняшней статье, вы узнаете как создать красивый эффект неонового свечения текста, средствами JQuery и CSS, и совсем немного фотошопа. Результат, как обычно можно посмотреть заранее. Читать далее Эффект неонового текста с помощью CSS и JQuery

Анимированный ландшафт с помощью CSS и JQuery

С появлением JQuery, многие разработчики, не слишком хорошо знакомые с javascript, начали использовать jQuery, благодаря большому количеству различных эффектов, поддерживаемых этим фреймворком. На сегодняшний день, JQuery является одним из самых популярных ява-скрипт-фреймворков. Такая его популярность объясняется простотой использования и наличием множества замечательных эффектов, для применения которых, не требуется углубленных знаний ява-скрипт. В сегодняшней статье, мы создадим анимированную картинку, с помощью CSS и JQuery. Читать далее Анимированный ландшафт с помощью CSS и JQuery

Создание навигации “волшебная линия” с помощью jQuery

Такой “скользящий” стиль навигации существует довольно давно, мне всего лишь было нужно изменить его немного под собственные нужды, поскольку появилась такая возможность. Это оказалось очень легко. Можете взглянуть на два примера такой навигации на демонстрационной странице. Читать далее Создание навигации “волшебная линия” с помощью jQuery

Создание формы со скользящими подписями

Пару недель назад, я читал статью Люка Вроблевски. Для тех, кто еще не слышал о нем, Люк —  автор книги о правильном дизайне веб-форм.

В его статье, меня особенно заинтересовала часть, о расположении подписей внутри текстовых полей: Читать далее Создание формы со скользящими подписями

Анимация jQuery: изучение за 7 шагов

Небольшой штрих анимации может украсить любой, скучный интерфейс. В сегодняшней статье, вы узнаете, как правильно ее использовать с помощью jQuery. Читать далее Анимация jQuery: изучение за 7 шагов

Фантастическая CSS3 лайтбокс галерея с помощью jQuery

С удовольствием принимаю эстафету по обзору полезных зарубежных ресурсов, предложенную блоггером cuprum, и сегодня, хочу представить вашему вниманию англоязычный блог — tutorialzine.com. Этот блог отличается от других, главным образом тем, что в нем регулярно публикуются очень красивые, а главное полезные, готовые решения для веб-разработчика. И сегодняшняя статья – не исключение. Читать далее Фантастическая CSS3 лайтбокс галерея с помощью jQuery

Простой, перетаскиваемый элемент на jQuery

Бывают случаи, когда вам может понадобиться создать перетаскиваемый элемент внутри вашего веб-приложения. Это отличная функциональность, однако, возможно вы хотите, чтобы элемент оставался на новом месте, после перетаскивания. В сегодняшней статье вы узнаете, как можно легко перетаскивать и закреплять в новом месте нужный элемент даже после перезагрузки страницы, с помощью захвата и хранения его X и Y координат. Читать далее Простой, перетаскиваемый элемент на jQuery

Красивая форма обратной связи на основе AJAX

Предоставление посетителям сайта простого и надежного средства обратной связи – это важнейшая часть любого веб-проекта. Наиболее простым и часто используемым каналом обратной связи — являются контактные формы. Посмотреть результат можно здесь. Читать далее Красивая форма обратной связи на основе AJAX