Pull to refresh

Анимированный фон средствами jQuery или «Эй, а ведь круто! Как Flash!»

Website development
jQuery + CSS Sprite
Занимательные поделки от Джонатана Снука. Данная статья будет интересна скорее новичкам, нежели более умудренным разработчикам, хотя мистер Снук достаточно авторитетен и его методики могут быть полезны всем.

Итак, в данной заметке речь пойдет о том, как не просто заставить фон элеметов страницы вести себя живо, но и сделать это с использованием максимально простой разметки. Все благодарности и вопросы прошу адресовать ее настоящему автору упомянутому выше, я лишь достаточно вольным образом перевожу написанное на его сайте. Также, чтобы читателям не пришлось попусту тратить свое время имеет смысл взглянуть на конечный результат стараний.

Основой для написания данной заметки стала статья Дэйва Ши об использовании спрайтов вместе с 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)
image
В данном случае анимация будет происходить за счет изменения позиции фона слева направо. Выбор картинки лежит сугубо в области фантазии того или иного разработчика. Каждый новый вариант спрайта приводит к новому интересному эффекту.

Еще пример:
image
В этом же случае "перемещение" происходит по вертикали. При этом, чем плавнее переход между цветами изображения, тем менее заметно будет перемещение как таковое. Соответственно будет более мягкий эффект затухания (см. пример «Example C: Fade 1-colour»).

Ссылки по теме (англоязычные ресурсы)
Вот и все! Всем спасибо за внимание.
Tags:jquerycss spritestutorialhow to
Hubs: Website development
Total votes 88: ↑82 and ↓6 +76
Views11.9K

Popular right now

Frontend Developer (JS/jQuery/CSS/Webasyst)
from 100,000 ₽WebasystМоскваRemote job
Верстальщик на Wordpress
to 80,000 ₽JetLendRemote job
Frontend-разработчик
from 60,000 to 130,000 ₽ФЦТ | Моя РоссияRemote job
Frontend разработчик
from 200,000 ₽СберМоскваRemote job
Frontend-разработчик
from 120,000 to 180,000 ₽BazonНовосибирск

Top of the last 24 hours