Анимация фонового изображения с помощью jQuery

Метки: javascript, jquery

Using jQuery for Background Image Animations Using jQuery for Background Image Animations

← Как Google обнаруживает платные ссылки5 шагов к пониманию Drag and Drop в Ext JS →
Мне стало интересно, что можно сделать с использованием простой HTML-структуры (без избыточных тегов), а также простейшего кода.
Изменение позиции фонового изображения будет лучшим решением для создания нужного эффекта (и я не первый, кому это пришло в голову, смотри пример в конце статьи).
jQuery является отличным решением для такого рода задач, но к сожалению, в стандартной сборке не содержится средств для нормального изменения позиции фонового изображения, так как для этого нужно менять два параметра вместо одного (к сожалению, не все браузеры поддерживают background-position-x и -y). Возьмите последнюю версию плагина Background-Position. В предыдущих версиях не было поддержки отрицательных и дробных значений свойств.
HTML
Никому не нравится добавлять дополнительный HTML-код при каждой новой фиче, нам нужен очень простой маркированный список:
Убрать подсветку кода
1
2
3
4
5

<ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
</ul>


Простой CSS
Я установил плавающую навигацию и указал блочное отображение ссылок с небольшим отступом. Ничего заумного (в этом вся фишка).
Убрать подсветку кода
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

ul {
        list-style:none;
        margin:0;
        padding:0;
}
li {
        float:left;
        width:100px;
        margin:0;
        padding:0;
        text-align:center;
}
li a {
        display:block;
        padding:5px 10px;
        height:100%;
        color:#FFF;
        text-decoration:none;
        border-right:1px solid #FFF;
}
li a {
        background:url(bg.jpg) repeat 0 0;
}
li a:hover {
        background-position:50px 0;
}

Заметьте, что было описано действие при наведении курсора. Посетители у которых отсутствует поддержка JavaScript увидят хотя бы конечное состояние. Я описал фон в «li a» отдельно, чтобы он выделялся, но начальная позиция фона должна быть установлена в соответствии с фоновым рисунком, который вы выберите для использования эффекта.

Рисунок
Вы можете достигать разного рода эффекты, создавая ваши рисунки в разной манере.
Анимация фонового изображения с помощью jQuery
Рисунок 1: Перекрывание

На рисунке 1, состояния до и после находятся слева и справа, но обычный уклон сможет сделать интересный эффект.

Анимация фонового изображения с помощью jQuery
Рисунок 2: Затухание

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

Скрипт
Наконец-то сам скрипт, который заставляет все это работать, довольно прост. Анимация должна срабатывать при каждом наведении и отведении курсора мыши от навигации.
Убрать подсветку кода
1
2
3
4
5
6
7
8
9
10
11
12

$('#nav a')
        .css( {backgroundPosition: "0 0"} )
        .mouseover(function(){
                $(this).stop().animate(
                        {backgroundPosition:"(0 -250px)"}, 
                        {duration:500})
                })
        .mouseout(function(){
                $(this).stop().animate(
                        {backgroundPosition:"(0 0)"}, 
                        {duration:500})
                })

Элементы захватываются с помощью $ функция и CSS. Это важно для Internet Explorer и Firefox, которые не устанавливают значение по-умолчанию для позиции фона. В IE вы можете обойтись объявлением background-position-x и -y, но проще установить начальные значения в скрипте. Затем, элементы приводятся в действие используя события mouseover и mouseout. Заметьте важный момент, что каждая анимация останавливается до того как начнется заново.
jQuery также имеет метод hover, который может использоваться вместо отдельного использования методов mouseover и mouseout. Причина, по которой я не стал его использовать, потому что с использованием двух методов более ясно их назначение. Метод hover принимает два параметра: функция, которая должна выполняться при наведении и функция, которая должна быть выполнена при отведении курсора мыши.

Оригинал: Using jQuery for Background Image Animations

Рейтинг: 12345   << Вы можете поставить оценку этой статье


Подобные статьи:
   Понимание области видимости в объектно-ориентированном JavaScript
   Продвинутая отладка в JavaScript
   Определение и использование собственных событий в JavaScript


Обсуждение статьи:

 
Нормальный чел [2010-06-04]
А че трудно размещать примеры для скачивания?
Все сайты такие стали, косите под яйце-головых.


 

Оставить комментарий:

Имя


E-mail


Сообщение