Анимация при помощи спрайтов
Ох, давненько я не писал о интересных реализациях меню. Сегодня мы создадим анимированное меню и за одно раскроем тему спрайтов, о которой, насколько помню, я писал лишь один раз.
Так вот, суть спрайтов — использование одного изображения как несколько изображений при помощи изменения backgroundPosition. Если Вы не поняли, то чуть позже при виде примеров будет намного понятней.
Для начала создадим каркас нашего меню.
<ul>
<li><a href="#">Меню 1</a></li>
<li><a href="#">Меню 2</a></li>
<li><a href="#">Меню</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;
}
Хочу обратить ваше внимание на li a и li a:hover, при наведении на ссылку в меню, фон сдвинется на 50px. Это и есть спрайт.
Этот эффект уже придает динамичности нашему меню, но теперь мы еще добавим плавное изменение фона при помощи jQuery и плагина «Background-Position».
Подключаем библиотеку jQuery и нужный нам плагин.
Теперь изменяем Background-Position при помощи jQuery кода.
$('#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})
})Этот код будет плавно сдвигать фон на 250px при наведении курсора с плавностью 500. Посмотреть примеры и скачать их вы можете ниже.
В принципе с помощью этого приема можно сделать множество разнообразных эффектов, так что добавляем его в свой портфель любимых приемов ;-)
странно
пример чего-то не работает
Картинок фона нету, а так да, работает
забавно.
PS:// не работает
Пример не работает в FF 3.0.2
Прошу прощения, поправил.
Свет отключился и картинки плохо залились.
давно этим пользуюсь, тока не знал что это спрайты, штука хорошая
Спасибо за интересные примеры менюшек. Возьму себе на вооружение. Только вот если каждый пункт меню реализован в виде отдельной картинки не очень хорошо получается.
Супер! Оч понра! Спасибо!
Для li тоже стоит указать background (просто продублировать) – чтобы осел 6 не мигал (т.н. flickering effect).
Zodios А вы попробуйте поэксперементировать и вполне возможно вы сами сможете устранить этот недостаток.
А мне не понравились спрайты тем, что этовсё можно сделать и без JS. И без Flash, разумеется :)
а два года назад без jQuery это вигледело так
Молодец!!! только чето неполучаеца.
Всё получается, и отлично работает. Спасибо
Начала заниматься web-дизаином три дня назад, поэтому для Гуру вопрос может показаться немного странным, но все же а куда и как в этом замечательном коде вставить ссылки на странички, которые должны открываться при нажатии на это замечатьльное меню.
Зараннее всем спасибо, не судите строго…
жесьть
я новая
класс
Шикарное меню, особенно где сверху опускается волна! Не думал что, всё настолько просто.
Оооо… очень нужно и полезно! Спасибо большое
Все получилось, спасибо.
Анимация придаёт ссылкам и кнопкам более мягкий, нежный и приятный эффект