Как известно, интересные фишки на сайте всегда привлекали взор пользователей своей своеобразностью. Данный визуальный прием позволяет привлечь внимание к необходимому вам элементу. Плагин jQuery Approach предназначен для формирования эффекта смены свойств объекта при приближении к нему курсора мыши. Данный плагин достаточно прост в использовании и занимает мало места. Однако он может существенным образом изменить интерфейс веб проекта, помогая выделять важные элементы на страницах.

Допустим, что объект foo имеет начальную непрозрачность 0.2 (установлено в таблице стилей). В таблице стилей:

В коде вызова скрипта:

Когда курсор мыши придвигается к объекту foo и находится от него в радиусе, заданном при вызове плагина (в нашем примере радиус равен 300px), непрозрачность объекта начинает меняться от значения 0.2 до 0.99 пропорционально расстоянию от курсора мыши до объекта.

Примечание: Плагин принимает любое свойство CSS, которое можно использовать для анимации jQuery, а также доступны параметры работы с цветом, если вы используете эффекты jQuery UI. Простая демонстрация, в которой анимируется размер шрифта и цвет.

В следующем примере используется 40 кругов, каждый из которых имеет непрозрачность 0.2. Плагин jQuery Approach применяется для всех кругов с устновленной дистанцией действия 100px и анимацией непрозрачности до значения 0.8 при приближении курсора мыши к центру окружности.

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.