Мне стало интересно, что можно сделать с использованием простой HTML-структуры (без избыточных тегов), а также простейшего кода.
Изменение позиции фонового изображения будет лучшим решением для создания нужного эффекта (и я не первый, кому это пришло в голову, смотри пример в конце статьи).
jQuery является отличным решением для такого рода задач, но к сожалению, в стандартной сборке не содержится средств для нормального изменения позиции фонового изображения, так как для этого нужно менять два параметра вместо одного (к сожалению, не все браузеры поддерживают background-position-x и -y). Возьмите последнюю версию плагина Background-Position. В предыдущих версиях не было поддержки отрицательных и дробных значений свойств.
HTML
Никому не нравится добавлять дополнительный HTML-код при каждой новой фиче, нам нужен очень простой маркированный список:
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
Простой CSS
Я установил плавающую навигацию и указал блочное отображение ссылок с небольшим отступом. Ничего заумного (в этом вся фишка).
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
Анимация фонового изображения с помощью jQuery
Рассмотрим рисунок 2 более детально. Количество видимого пространства в нормальном состоянии и при наведении, находятся в самом верху и в самом низу изображения. Большой градиент по середине создает эффект затухания и рассвета, при анимации.
Простота рисунков позволяет достигать очень маленьких размеров файлов. Рисунки с более сложной анимацией требуют большую глубину цвета и соответственно будут весить больше. Всегда ищите золотую середину между эффектом и выполнением.
Скрипт
Наконец-то сам скрипт, который заставляет все это работать, довольно прост. Анимация должна срабатывать при каждом наведении и отведении курсора мыши от навигации.
$('#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 принимает два параметра: функция, которая должна выполняться при наведении и функция, которая должна быть выполнена при отведении курсора мыши.