Что такое спрайт. Спрайты. Зачем комбинировать эти изображения? Разве не быстрее загружать маленькие

Переходим к CSS. Первым делом запишем общие стили для всех ссылок:

A { background-image: url(https://goo.gl/1t18Rz); background-repeat: no-repeat; height: 98px; width: 100px; display: inline-block; margin-right: 10px; }

A.facebook { background-position: left top; }

Идем дальше: позиционируем фон для ссылки на Twitter. Иконка Твиттера расположена справа от Facebook и примыкает к ней, не создавая пустых промежутков. Нам необходимо переместить спрайт влево на столько пикселей, чтобы скрыть иконку Facebook и полностью заполнить область ссылки иконкой Twitter. Поскольку ширина каждой иконки равна 100 пикселям, то мы и сдвигаем фон влево на 100 пикселей. Вертикальное позиционирование мы пока нигде не меняем, а оставляем значение top:

A.twitter { background-position: -100px top; }

Аналогичное действие мы проделаем для остальных ссылок, прибавляя к каждому последующему горизонтальному позиционированию еще 100 пикселей, тем самым сдвигая спрайт всё больше и больше влево. Получится такая картина:

A.youtube { background-position: -200px top; } a.instagram { background-position: -300px top; } a.linkedin { background-position: -400px top; } a.tumblr { background-position: -500px top; } a.google { background-position: -600px top; }

Результат работы данного кода показан на скриншоте ниже:

Теперь разберемся с поведением фоновых картинок при наведении курсора на ссылку. Нам нужно смещать спрайт по вертикали вверх таким образом, чтобы в область просмотра попадала иконка из нижнего ряда спрайта. Здесь всё довольно просто и решается одним правилом CSS, а именно присвоением значения bottom свойству background-position-y:

A:hover { background-position-y: bottom; }

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

Результат работающих спрайтов смотрите на демонстрации ниже (для более красивой подачи примера мы сделали сдвиг фона более плавным при наведении курсора):

Если вам стало интересно, то вот и строка, которая отвечает за плавность изменения иконок (не волнуйтесь, чуть позднее мы будем изучать CSS-анимацию, и в частности свойство transition):

A { transition: all 0.2s ease-out; }

Итак, теперь вы знаете, что такое спрайты CSS и чем они могут быть полезны. Помимо предотвращения задержек при загрузке фоновых картинок, использование спрайтов помогает снизить нагрузку на сервер. Кроме того, это удобный способ хранить все графические элементы интерфейса в одном месте.

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

Спрайты – одни из красивейших природных явлений на нашей планете – невероятной величины молнии, которые еще называют «небесными духами».

Спрайты – необычные молнии, которые способны удивить человека не только своей божественной красотой, но и нестандартным, как для молнии, поведением. Мы привыкли, что обычная молния бьет с облаков вниз на землю. Что касается спрайтов, то здесь дело обстоит иначе – они бьют вверх, создавая в небесной сфере потрясающе красивое зрелище.

Впервые спрайты были зафиксированы в 1989 году. Первым их увидел американский астроном-эксперт Джон Уинклер, который почти полвека проработал в NASA. Ученый обнаружил молнии случайно, когда в целях научных изысканий наблюдал за грозой. Впервые увидев эти направленные вертикально вверх молнии, он не поверил собственным глазам. Удивило Уинклера и то, что такой разряд появлялся на необычайно большой, как для обычной молнии, высоте. Направленный вертикально вверх он мог представлять опасность для аппаратов, запускаемых в космос, самолетов и прочих летательных машин. По этой причине Джон Уинклер решил продолжить изучение этого необычного явления.

В ночь с 22 на 23 сентября 1989 года мистер Уинклер, воспользовавшись высокоскоростной кинокамерой, умудрился заснять огромные вспышки света, которые простирались в небе по направлению снизу-вверх. Ученый, пользовавшийся устаревшей аппаратурой, посчитал, что эти молнии возникли на высоте 14 километров, что вполне допустимо и для обычных молний. Впоследствии, когда изучением спрайтов занялись современные научно-исследовательские центры и лаборатории, было доказано, что эти природные явления появляются на высоте не менее 55 км. На такой высоте вы не сможете встретить ни одного небесного разряда, который был бы направлен в сторону земли.

Заинтересовавшись данными о спрайтах, которые представил Уинклер сотрудникам NASA, ученые почти сразу же развернули крупномасштабную кампанию по изучению этого природного явления. В первую же ночь исследований они обнаружили около 200 вспышек молний в слоях ионосферы. Вспышки света возникали в основном в пределах 50-130 километров над поверхностью земли. Это зрелище одинаково восхищало и страшило ученых, поскольку в те времена многие из них еще не знали, чего толком можно ждать от спрайтов. Опасения ученых были понятны, так как спрайты имели все шансы на то, чтобы стать прямой угрозой для высотных летательных аппаратов. Чтобы исключить возможность этой угрозы, ученые решили изучить механизм возникновения спрайтов.

Проведя ряд наблюдения за спрайтами, ученые выяснили, что это явление возникает в основном только при очень сильной грозе, шторме или урагане. Большинство обычных молний, которые достигают земли, бьют из отрицательно заряженной части облака. Однако некий их процент берет свое начало в положительно заряженной части. Доказано, что молнии, берущие начало в этой области, обладают более сильным зарядом, а соответственно и силой. Считается, что в положительно заряженной части облака берут свое начало и спрайты.

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

Джеты представляют собой вспышки света, наблюдаемые на наиболее близком расстоянии к земле, от 15 до 30 километров. Именно их, скорее всего, зафиксировал Джон Уинклер, который в 1989 году впервые произвел наблюдение вспышек молний в верхних слоях атмосферы. Джеты имеют трубчатую форму. Обычно они сине-белого или голубого оттенка. Известны случаи появления гигантских джетов, которые били в высоту на расстояние около 70 километров.

Спрайт — редкий вид грозовых разрядов

Спрайты – вид молний, о которых мы говорим в этой статье. Они появляются на высоте от 50 до 130 километров и бьют по направлению к ионосфере. Спрайты появляются через доли секунды после удара обычной молнии. Обычно они возникают группами, а не поодиночке. Длина спрайтов, как правило, держится в пределах нескольких десятков километров. Диаметр группы спрайтов может достигать 100 км в поперечнике. Спрайты – это красные вспышки света. Они быстро появляются и быстро исчезают «Продолжительность жизни» спрайта всего около 100 миллисекунд.

– венец атмосферных молний. Они появляются на высоте свыше 100 км над земной поверхностью. Обычно эльфы появляются группами, напоминающими круг.

Диаметр такой группы может достигать 400 км в поперечнике. Также эльфы могут бить до 100 км в высоту – в самые верхние слои ионосферы. Зафиксировать эльфы крайне сложно, так как «живут» они не дольше пяти миллисекунд. Заснять такое явление можно только при помощи специальных, современных видеоприборов.

Согласно Географической карте гроз, наибольшими шансами увидеть спрайты обладают жители экваториальной и тропической зоны Земного шара. Именно в этой области случается до 78% всех гроз. Жители России также могут наблюдать спрайты. Пик гроз в нашей стране приходится на июль-август месяц. Именно в это время любители астрономии могут увидеть такое красивое явление как спрайты.

Согласно американскому Справочнику наблюдения за спрайтами и гигантскими джетами, для того, чтобы увидеть спрайты, наблюдатель должен находиться на расстоянии примерно 100 километров от эпицентра грозы. Для того чтобы наблюдать джеты, ему следует навести оптику на 30-35 градусов по направлению к грозовой области. Тогда он сможет наблюдать часть ионосферы на высоте до 50 километров, именно в этой области чаще всего появляются джеты. Чтобы наблюдать спрайты, следует навести бинокль на угол 45-50 градусов, что будет соответствовать области неба на высоте около 80 км – месту, где рождаются спрайты.

Для лучшего и более детального изучения спрайтов, джетов, а тем более эльфов, наблюдателю лучше воспользоваться специальной киноаппаратурой, которая позволит детально зафиксировать небесные вспышки. Наиболее удачное время для охоты за спрайтами в России – период с середины июля по середину августа.

Спрайты - это довольно интересная и простая технология. Сейчас я расскажу о ней немного подробнее.

Если кратко, то CSS спрайты это несколько картинок в одном файле. Файл один, а изображений внутри него несколько. При этом для посетителя это полностью незаметно. Тому кто просматривает сайт кажется, что он видит несколько отдельных картинок.

Зачем это нужно? Спрайты снижают количество запросов к странице от пользователя и уменьшают общий размер изображений. В итоге посетитель быстрее увидит сайт.

Как это делается? Обычная картинка увеличивается в ширину и высоту, то есть просто на обычной картинке размещаются рядом несколько изображений. Потом каждое отдельное изображение из этого набора подставляется в нужный блок с заданной шириной или высотой таким образом, чтобы все остальные изображения не было видно. Весь набор обрезается и остается только одна картинка. Один спрайт. Все остальные картинки остаются за пределами конкретного блока.

Чтобы было понятнее приведу аналогию. Представьте что вы смотрите в замочную скважину. Вы видите только какой то отдельный кусок помещеняи по ту сторону двери. Если вы чуть сдвинетесь в сторону и будете смотреть в скажину под другим углом, то увидите какой то другой кусок того же самого помещения.

Чтобы не путаться давайте сразу обозначим термины:
Спрайт - это одна картинка из файла с несколькими изображениями.
Набор спрайтов - это сам файл с несколькими изображениями.

Когда стоит использовать спрайты? Ответ в общем то один - спрайты нужно использовать если у вас на странице много мелких изображений. Неважно какие это изображения. Если у вас много градиентов с одинаковым расположением, много кнопок, много иконок и.д. Если на какой то отдельной странице много мелких изображений, то можно подумать над использованием спрайтов.

На странице как правило бывают три вида картинок - jpg, png и gif. У всех этих форматов есть два режима загрузки - это обычный режим и режим постепенной загрузки.

Формат jpg может быть обычным (базовым) и прогрессивным (progressive). В обычном режиме картинка начинает отображаться по строкам по мере загрузки и сразу в хорошем качестве. В прогрессивном режиме картинка jpg загружается сразу целиком, но в плохом качестве и по мере загрузки качество увеличивается.

Такое же поведение есть у gif и png. GIF может быть обычным и черезстрочным (interlaced). PNG может быть обычным и черезстрочным (interlaced). Поведение черезстрочных gif и png аналогично поведению прогрессивного jpg. Такое поведение немного увеличивает размер файла.

Итого. Изображение может появиться на странице сразу, а может появиться с задержкой. Применительно к спрайтам это важно знать. Спрайты желательно делать черезстрочными или прогрессивными. Пользователь должен как можно быстрее увидеть картинки пусть и в плохом качестве.

Но! Если финальный файл со всеми спрайтами будет слишком большой, то несмотря на всю прогрессивность и черезстрочность посетителю придется ждать даже частичную загрузку файла. Поэтому я не рекомендую использовать большие наборы спрайтов. Если файл большой то полностью теряется весь смысл спрайтов - ускорять работу сайта. С большими наборами спрайтов пользователю придется ждать столько же, если не больше, как и при использовании обычных раздельных изображений.

Большими мне кажутся файлы свыше 30 килобайт. Это субъективно. У вас могут быть какие то свои представления о величине файла. Файл размером 30 килобайт будет загружаться около 7 секунд при скорости интернета 56,6 кбит/с.

В одном спрайте у меня будут иконки для:

То есть первый набор спрайтов у меня будет содержать пять картинок. Все картинки у меня будут одинакового размера - 16 на 16 пикселей. Спрайтами можно делать изображения с разными разрешениями, не обязательно чтобы разрешение всех картинок совпдало. При разном разрешении картинок чуть усложняется объединени этих картинок в один файл.

В итоге первый пример будет выглядеть так:

Я нашел пять иконок. После чего просто объединил их все в одном файле. Вот такой вот файл у меня получился в итоге:

Обращаю ваше внимание. В данном случае иконки расположены не вплотную, между ними есть небольшие отступы. Как подобрать эти отступы? Можно конечно рассчитать все по пикселям, но наш случай довольно простой, поэтому здесь лучше всего подобрать эти отступы на картинке экспериментальным путем. Сначала объединяем изображения просто на глаз, потом берем самую верхнюю картинку, ставим ее на нужное место. Если картинка находится на своем месте, но при этом откуда то торчит кусок другого изображения, то значит отступ нужно увеличить.

Еще один момент. Последней в списке идет иконка для списка - зеленая стрелка. Почему она именно последняя? Расположение остальных иконок на картинке нам безразлично, но в списке любой пункт может занимать несколько строк и если зеленая стрелка будет где-то посередине, то на следующих строках будут торчать другие картинки. Посмотрите на картинку списка выше, чтобы понять о чем я говорю.

И так. Я нашел пять иконок, объединил их в один файл. Что делаем дальше? Разумеется пишем код:

• Пункт списка
• Еще один пункт списка
• Пункт списка
• Еще один пункт списка,
  но в две строки
• Пункт списка
• Еще один пункт списка

Это html код списка. Теперь применим к нему наш спрайт:

Ul li{ padding:0 0 0 21px; background:url("sprites.png") 0 -94px no-repeat; }

Что мы тут сделали? Сделали отступ в каждом

Теперь посмотрим второй пример.


На этой картинке изображено окошко. У окна есть заголовок, тело и подвал. У каждого из этих элементов на фоне установлен градиент. Присмотритесь если этого сразу не видно, там есть переход цвета от бледного к насыщенному.

Я покажу как граденты в этом окошке можно сделать спрайтами. Заголовок и подвал окна будут фиксированной высоты - 30 пикселей. Тело окна будет тянуться в зависимости от длины текста.

Теперь напишем html код окошка:

Начинаем применять спрайты. Начнем с заголовка окна:

#window-header{ height:30px; background:#C0C0FF url("gradients.png") 0 0 repeat-x; }

В файле gradients.png сначала идет градент для заголовка, потом для тела и потом для нижней строки. То есть градент для заголовка начинается от самого верха. Поэтому мы просто ставим в качестве фона сам файл и позицию указываем как «0 0», то есть никуда не отступать. Чтобы градиент растянулся по горизонтали прописываем «repeat-x».

Чтобы градент целиком влез в зголовок, указываем высоту в 30 пикселей.

Точно так же как и заголовок поставим градиент для подвала:

#window-footer{ height:30px; background: #C0FFC0 url("gradients.png") 0 -60px repeat-x; }

Только на этот раз мы сдвинем картинку вниз на 60 пикселей.

С телом окошка ситуация сложнее. Тело у нас будет растягиваться, в отличии от заголовка и подвала. То есть если мы просто сделаем один div для тела окна и поставим туда градент, то в этом диве появятся сразу все градиенты. Как вариант можно поставить градиент для тела последним по вертикали, но что если у нас несколько градиентов для блоков, которые тянутся? Все сразу не сделаешь последними. Мы сделаем чуть хитрее.

CSS код будет следующий:

#window-body{ position:relative; } #window-body-gradient{ position:absolute; left:0; top:0; width:100%; height:30px; background:url("gradients.png") 0 -30px repeat-x; } #window-body-text{ position:relative; }

Теперь расскажу подробнее что мы тут сделали. Вот html код тела окна отдельно:

Как видите в тело у нас вложено еще два дива. Первый «window-body-gradient» будет отвечать за градиент. Второй «window-body-text» нужен для текста. Кроме того, как это понятно из CSS кода мы применили position:relative; для всего тела окна целиком.

Для градиентного дива мы указываем position:absolute. Таким образом мы выбили градиентный див из общего потока. Теперь этот див ни на что не влияет. Так как для всего тела целиком у нас указано position:relative, то градиентный див никуда дальше родителя не уплывает. Прикрепляем его к левому и верхнему краю тела окна с помощью «left:0; top:0;». Указываем высоту градиентного дива - 30 пикселей. То есть тут указываем высоту градиента который мы будем прикреплять, если высота дива будет больше высоты градиента, то в диве будут торчать другие спрайты. И наконец прикрепляем к градиентному диву наш файл gradients.png. Как обычно сдвигаем фон вверх на нужное расстояние, в данном случае сдвигаем фон на 30 пикселей вверх.

Теперь в теле окна у нас есть градиент. Но он заслоняет текст. Чтобы текст не заcлонялся обернем весь текст в див и присвоим ему position:relative. После присвоения текст будет поверх градиента.

Вот в общем то и все. Теперь мы расставили все градиенты в наше окошко. И в заголовок, и в тело, и в подвал.

Такие длинные пояснения я делаю, чтобы совсем все было понятно. Но на самом деле если вы немного разбираетесь в верстке, то вам наверное будет достаточно посмотреть сами примеры:

В очередной раз продублировал ссылку.

На самом деле можно придумать много примеров по использованию спрайтов. Я показал только два примера, но этих примеров должно хватить для понимания принципов работы спрайтов. Если остались какие то вопросы, то задавайте в комментариях.

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

На сайте может быть множество миникартинок. Например, смайлики, стрелочки, всевозможные маленькие элементы для дизайна. Каждая такая картинка весит ничтожно мало, но за счет огромного числа запросов создаются проблемы со скоростью загрузки сайта.

Еще давным-давно (2003-2004) было предложено решение этой ситуации с главной целью ускорить загрузку сайта с помощью уменьшения количества запросов к серверу. Это технология получила название "Спрайты".

Спрайт CSS - технология объединения небольших картинок в одну. При помощи сдвигов через CSS достигается вырезание нужной части картинки

Например, вместо 10 картинок грузится одна, но побольше. При грамотном распределение это ускоряет работу сайта. Однако здесь главное не переусердствовать. Не всегда объединение картинок дает преимущество в загрузке сайта.

Рассмотрим небольшой пример реализации спрайта CSS. Допустим, мы сделали следующую картинку из трех отдельно взятых стрелочек.

Чтобы обратится к нужной стрелке в CSS надо прописать

Вот как это выглядит на странице:

В рассмотренном примере мы использовали отрицательные отступы. Это делается, для того, чтобы поднять изображение вверх. Например, есть следующий спрайт:

Чтобы вырезать значок RSS мы должны написать следующие отступы

В примере мы подняли изображение на 40 пикселей вверх и на 90 влево.

• Сокращение количества обращений к серверу
• Если используются динамическое изменение картинки (например, при наведении в элементе меню), то картинка уже будет находится в кэше и поэтому не будет запаздывания на загрузку в нужный момент
• Если фон объединяемых изображений схож, это еще и уменьшить суммарный "вес" изображений

Из минусов спрайтов: сложность работы в случае ручного труда. Но благо есть бесплатные сервисы, которые готовы упростить работу и сделать все за вас.

Понравилось:
27

Не понравилось: 4

Недоступен ни один перевод.

спрайт

до или после "до" "после" "после"

angry_bird angry.png. index.html

Недоступен ни один перевод.

CSS спрайты - это графика для Вашего Web-сайта, объединённая в один графический файл. "Почему один файл?" - спросите Вы. Дело в том, что такой подход к хранению изображений позволяет повысить производительность веб-страниц, а также хранить графические изображения более организованно. Давайте взглянем на некоторые из лучших практик применения спрайтов. Само название спрайтов может напомнить Вам об игровых спрайтах, ретро игровой консоли и даже браузерных играх, которые так популярны сегодня:

Итак, применимо к Веб-дизайну, спрайт - это всего лишь один большой файл, содержащий несколько изображений для Вашего сайта, экономящий время загрузки и передачи файла по сети. Когда спрайт, к примеру, содержит 20-30 изображений, то это существенно может облегчить нагрузку на сервер, поскольку, если бы эти изображения хранились по отдельности - серверу пришлось бы делать соответственно 20-30 отдельных запросов для получения каждого такого изображения. Благодаря спрайту на сервер идет всего один HTTP-запрос - для получения одного-единственного изображения. Спрайт визуально может выглядеть не совсем "читаемо" для глаза, поскольку его основная задача - лишь собрать разные "куски" Вашего дизайна воедино. Например, спрайт может быть вот таким:

Спрайты используют большинство современных сайтов, и всем известный ВКонтакте - не исключение. Например, так он хранит в одном файле "кусочки" интерфейса - а именно всем знакомые иконки:

Существенным моментом использования CSS-спрайтов является то, что серверу надо отправить только один графический файл, содержащий все Ваши изображения, а не множество отдельных изображений - и через CSS можно отобразить любой маленький сегмент из этого графического файла в качестве фона для элемента. Некоторые думают, что по отдельности картинки быстрее грузятся, но это не так. Загружая один графический файл с множеством картинок, мы посылаем только один запрос на сервер, а при загрузке большого количества картинок - мы отправляем больше запросов на сервер. Объединение изображений в один файл позволяет не только значительно снизить количество HTTP-запросов, но и уменьшить общий размер файла изображения.

Приведу еще один пример спрайта. Так хранит элементы графики один известный западный сайт, посвященный дизайну:

Вы можете спросить - когда лучшим образом подготавливать спрайт? Для этого есть два разных подхода.

Есть два распространенных подхода при создании спрайт листа - сделать его до или после создания Вашего сайта. Вы можете поместить все изображения в спрайт лист перед созданием сайта. Это то, что мы называем подход "до" . Кроме того, Вы можете создать все изображения в виде отдельных файлов, что делает их редактирование более простым. Как только сайт будет построен, и все изображения подготовлены, Вы можете быстро и легко создать спрайт лист, либо вручную, либо, используя один из нескольких инструментов. Это мы будем называть подход "после" . Если спрайт листы для Вас в новинку или Вы новичок в Веб-дизайне, то Вам больше подойдёт подход "после" . Существует множество утилит, сервисов и программ для помощи при создании спрайтов, большинство из которых распространяются и доступны бесплатно.

При создании спрайта в Photoshop, желательно сразу все изображения размещать организованно и в какой-то определенной, выбранной Вами последовательности, чтобы потом работать с ними было легко и просто. Старайтесь всегда округлять место под каждое изображение спрайта до ближайших 10 пикселей, или оставлять больше пространства вокруг них, если они все одинакового размера. Когда дело дойдет до написания CSS-стиля, Вам не придется записывать измерения координат, и Вы будете менее склонны забывать числа с координатами нужных изображений. Вот пример удачного размещения разных изображений в одном спрайте:

Итак, мы познакомились с понятием спрайта в Веб-дизайне, но теория без практики - ничто. Поэтому сейчас мы c Вами создадим наш первый спрайт и научимся делать простую анимацию на HTML-странице. Наш пример будет основан на персонаже из игры Angry Birds - это забавная красная птичка. Для начала подготовим изображение-спрайт в формате.PNG, содержащее 4 фазы анимации птицы:

Создадим где-нибудь на диске каталог angry_bird - туда мы будем помещать файлы нашего примера. Сохраняем спрайт с птичками в этот каталог и называем файл angry.png. Следующим шагом - создаём в этом же каталоге файл с именем index.html - это будет наша тестовая страничка с анимацией. Далее откроем этот файл в редакторе и поместим туда следующий код:

Урок сайт - Демонстрация работы со спрайтами $(document).ready(function() { // здесь будет код на jQuery, создающий анимацию });

Немного поясню, что мы сейчас сделали. Во-первых, мы задали нашему HTML-документу кодировку UTF-8 , а значит, должны сохранить наш index.html в этой кодировке. Можно задать и другую, например, windows-1251 , - для нашей задачи это не принципиально. Далее, мы подключили к документу файл стиля style.css (его пока нет в нашем каталоге angry_bird , его создадим чуть позже). Также мы задали ссылку на внешний скрипт и подключили библиотеку jQuery - с помощью jQuery мы будем осуществлять динамическую смену картинок нашей птицы и менять её "фазы" из спрайта. Также мы подготовили внутренний JavaScript-блок, куда дальше поместим код, делающий анимацию птицы. Ну, и наконец, - основное тело документа содержит единственную гиперссылку, внутри которой DIV-блок, и у него ID задан в качествеbirdImage , а класс по умолчанию -bird-sleeping . Это значит, что наша птица при открытии страницы будет "спать" - это соответствует левому нижнему изображению внутри спрайта - где у неё закрыты глаза. Теперь самое время "нарезать" наш спрайт, т.е. выделить из него отдельные изображения.

Задача "нарезки" спрайта является довольно трудоёмкой - она требует внимательности, чтобы не ошибиться с координатами, определяющими каждое изображение в спрайте. К счастью, на сегодня есть сервисы, которые полностью снимают эту головную боль с дизайнера и верстальщика. Я использую для нарезки и рекомендую Вам сервис http://spritecow.com . Суть сервиса проста и очень удобна - мы мышью выделяем каждую картинку птицы, а SpriteCow выдает нам готовый CSS-код с координатами. Всё, что нам останется сделать - это просто задать 4 стиля для каждой фазы птицы! Зайдя на сайт, видим 2 кнопки - "Open Image" и "Show Example". Нам нужна первая кнопка, жмём на неё:

В открывшемся диалоге - выбираем наш файл спрайта angry.png, после чего видим, как наш спрайт загрузился на сайт. Далее нам необходимо определить цвет фона, для этого жмём на панели инструментов "Pick Background" и указываем на белую область нашего спрайта - это позволит правильно вырезать каждую фазу птицы:

Выделяем первое изображение и получаем автоматически для него CSS-код:

Теперь, самое время создать в нашем каталоге angry_bird файл стилей style.css . Туда последоватьльно вставляем 4 сгенерированных куска CSS-кода, только вместо стандартного класса.sprite , предлагаемого нам SpriteCow назовём наши стили более понятно. Также, поскольку изображение спрайта у нас хранится прямо в корне каталога, удалим из свойстваbackground ненужный элемент пути - imgs/. У меня вышло так:

/* "обычная" птица. Левое верхнее изображение в спрайте */ .bird-normal { background: url("angry.png") no-repeat -12px -16px; width: 97px; height: 94px; } /* "Счастливая" птица. Правое верхнее изображение в спрайте */ .bird-happy { background: url("angry.png") no-repeat -118px -17px; width: 97px; height: 94px; } /* "Спящая" птица. Левое нижнее изображение в спрайте */ .bird-sleeping { background: url("angry.png") no-repeat -12px -120px; width: 97px; height: 94px; } /* "Злая" птица. Правое нижнее изображение в спрайте */ .bird-angry { background: url("angry.png") no-repeat -118px -120px; width: 97px; height: 94px; }

Теперь, когда мы успешно нарезали спрайт и поместили 4 стиля для каждого изображения в наш файл style.css , нам остается написать код на jQuery, который будет добавлять анимацию при наведении на нашу гиперссылку и при щелчке по ссылке. Как мы помним, по умолчанию у нас задан классbird-sleeping , т.е. наша красная птичка будет "спать" при открытии документа:)

Вся анимация будет строиться на 3-х методах jQuery:

• hover - обработчик наведения курсора на ссылку и "ухода" курсора с ссылки. Когда будем наводить курсор, птица будет "просыпаться" - т.е. класс станетbird-normal
• mousedown - обработчик нажатия левой кнопки мыши на ссылке. При этом птица будет становиться "счастливой" - т.е. DIV-блоку будет присваиваться классbird-happy
• mouseup - обработчик отпускания левой кнопки мыши. При отпускании птица будет становиться "злой" - т.е. DIV-блоку присваивается классbird-angry

Итак, вставляем следующий код в место, которое мы подготовили во внутреннем блоке JavaScript, размещенном на странице:

$(document).ready(function() { // здесь будет код на jQuery, создающий анимацию $("#birdImage").hover(function() { $(this).removeClass("bird-sleeping"); $(this).removeClass("bird-angry"); $(this).removeClass("bird-happy"); $(this).addClass("bird-normal"); }, function() { $(this).removeClass("bird-normal"); $(this).removeClass("bird-angry"); $(this).removeClass("bird-happy"); $(this).addClass("bird-sleeping"); }); $("#birdImage").mousedown(function() { $(this).removeClass("bird-sleeping"); $(this).removeClass("bird-normal"); $(this).removeClass("bird-angry"); $(this).addClass("bird-happy"); }).mouseup(function() { $(this).removeClass("bird-sleeping"); $(this).removeClass("bird-normal"); $(this).removeClass("bird-happy"); $(this).addClass("bird-angry"); }); });

Ну, вот и всё! Наша птица готова и внесла жизнь своей анимацией в страницу! :) Просмотреть демо можно . Скачать архив с примером - внизу статьи.