Занимательные поделки от Джонатана Снука. Данная статья будет интересна скорее новичкам, нежели более умудренным разработчикам, хотя мистер Снук достаточно авторитетен и его методики могут быть полезны всем.
Итак, в данной заметке речь пойдет о том, как не просто заставить фон элеметов страницы вести себя живо, но и сделать это с использованием максимально простой разметки. Все благодарности и вопросы прошу адресовать ее настоящему автору упомянутому выше, я лишь достаточно вольным образом перевожу написанное на его сайте. Также, чтобы читателям не пришлось попусту тратить свое время имеет смысл взглянуть на конечный результат стараний.
Основой для написания данной заметки стала статья Дэйва Ши об использовании спрайтов вместе с jQuery (от себя замечу, что описанная там методика работает немного "не очень" — притормаживает и порой ведет себя неадекватно). И, как было сказано ранее, задача состояла в более удобном способе воплощения задумки Дэйва.
Суть метода описанного здесь лежит в изменении позиции фона элементов. Тем не менее, при всей свой универсальности, jQuery с трудом может справиться с перемещением фона в силу того, что это требует изменения двух значений (вертикальной и горизонтальной позиции фонового изображения) одновременно. Джонатан нашел выход из ситуации при помощи плагина Background-Position Animations (его версия должна быть не ниже 1.0.2 — более ранние не поддерживают отрицательные и десятичные значения).
Что нужно?
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;
}
jQuery
От jQuery нужна собственно сама библиотека, ну и плагин (Background-Position Animations) упомянутый выше. Скрипт же представляет собою следующее:
$('#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( {backgroundPosition: "0 0"} )mouseover и mouseout.Джонатан отмечает, что хоть в jQuery и есть метод
hover (который включает в себя оба события) более удобным, для жесткого контроля над выполнением, является отдельная отработка событий наведения и удаления указателя мыши. Таким образом скрипт предотвращает повторное воспроизведение анимации при многократном наведении курсора.Спрайт (тот, что bg.jpg)
В данном случае анимация будет происходить за счет изменения позиции фона слева направо. Выбор картинки лежит сугубо в области фантазии того или иного разработчика. Каждый новый вариант спрайта приводит к новому интересному эффекту.
Еще пример:
В этом же случае "перемещение" происходит по вертикали. При этом, чем плавнее переход между цветами изображения, тем менее заметно будет перемещение как таковое. Соответственно будет более мягкий эффект затухания (см. пример «Example C: Fade 1-colour»).
