Эффект смены свойств объекта на jQuery
Как известно, интересные фишки на сайте всегда привлекали взор пользователей своей своеобразностью. Данный визуальный прием позволяет привлечь внимание к необходимому вам элементу. Плагин jQuery Approach предназначен для формирования эффекта смены свойств объекта при приближении к нему курсора мыши. Данный плагин достаточно прост в использовании и занимает мало места. Однако он может существенным образом изменить интерфейс веб проекта, помогая выделять важные элементы на страницах.
Допустим, что объект foo имеет начальную непрозрачность 0.2 (установлено в таблице стилей). В таблице стилей:
1 |
#foo { opacity: 0.2; } |
В коде вызова скрипта:
1 2 3 |
$("#foo").approach({ opacity: 0.99 }, 300); |
Когда курсор мыши придвигается к объекту foo и находится от него в радиусе, заданном при вызове плагина (в нашем примере радиус равен 300px), непрозрачность объекта начинает меняться от значения 0.2 до 0.99 пропорционально расстоянию от курсора мыши до объекта.
Примечание: Плагин принимает любое свойство CSS, которое можно использовать для анимации jQuery, а также доступны параметры работы с цветом, если вы используете эффекты jQuery UI. Простая демонстрация, в которой анимируется размер шрифта и цвет.
1 2 3 4 |
$("a#demo-link").approach({ "fontSize": "40px", "color": "#CC3300" }, 200); |
В следующем примере используется 40 кругов, каждый из которых имеет непрозрачность 0.2. Плагин jQuery Approach применяется для всех кругов с устновленной дистанцией действия 100px и анимацией непрозрачности до значения 0.8 при приближении курсора мыши к центру окружности.
1 2 3 |
$("#wrap img").approach({ "opacity": 0.8 }, 100); |
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Опубликовал Cooper 07.04.2012 в 18:27, в категории Плагины. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |