Простая анимация CSS (спрайты)

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

Ярким примером использования возможностей CSS для реализации интерактивной двухкадровой анимации является сайт украинской художницы Елены Миросединой:

Пример анимации css

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

Бесплатно скачать коды урока интерактивной CSS-анимации

1. Подготовка картинок. Идея такой двухкадровой анимации проста: во время верстки сайта нарезаются картинки двойного размера. Одна картинка содержит сразу 2 кадра анимации: верхний (неактивный, который видно сразу после загрузки страницы) и нижний (активный, который мы увидим вместо неактивного, если наведем на картинку указатель мыши):

Картинка с двумя кадрами

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

2. Описываем анимацию в классах CSS. В файл со стилями CSS, например, style.css, вписываем 3 css-класса, которые будут управлять поведением нашего интерактивного пункта меню:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.english {
margin: 0px;   /* без отступа снаружи ячейки */
padding: 0px;    /* без отступа внутрь ячейки */
width: 154px;   /* ширина картинки */
height: 45px;   /* высота картинки */
background-image: url(../img/english.gif);   /* относительный путь к двухкадровому изображению */
background-repeat: no-repeat;   /* фон не должен повторяться */
float: right;   /* плавающий блок с выравниванием вправо */
overflow: hidden;   /* обрезать  содержимое, если оно больше указанных размеров */
}

.english a {
margin: 0px;
padding: 0px;
width: 154px;
height: 45px;
background-image: url(../img/english.gif);
background-repeat: no-repeat;
background-position: 0px 0px; /* показывать первый кадр без смещения */
float: right;
overflow: hidden;
}

.english a:hover {
width: 154px;
height: 45px;
background-image: url(../img/english.gif);
background-repeat: no-repeat;
background-position: 0px -45px; /* показывать нижний кадр, сместив вверх половину картинки */
float: right;
}

Первый класс CSS english задает общий стиль для ячейки, в которой будет находиться этот графический пункт меню, второй класс english a описывает стиль ссылки (картинка будет являться ссылкой) и третий класс english a:hover задает смещение вверх двухкадрового изображения при наведении на картинку указателя мыши.

3. Код HTML для вставки анимации на страницу сайта. Остался последний маленький штрих – связать созданную ранее двухкадровую картинку и код CSS с HTML-страницей, на которой должна находится наша интерактивная анимация:

1
<span class="english"><a href="english.html" target="_parent" title="English version" rel="noopener noreferrer"></a></span>

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

По сравнению с анимацией JavaScript способ создания двухкадровой анимации с помощью стилей CSS (спрайты) имеет ряд преимуществ:

  1. Более простой и понятный код.
  2. Картинка загружается сразу вся, потому нет задержек при подгрузке второго кадра с помощью JavaScript.
  3. Анимация будет работать в любом случае, даже если в браузере пользователя отключена возможность выполнения скриптов JavaScript или запрещена анимация.
  4. Анимация с помощью спрайтов CSS одинаково работает во всех браузерах, выпущенных даже 5 лет назад.
  5. Смена кадров при наведении указателя мышки происходит мгновенно, нет никакой задержки даже на самых слабых компьютерах.

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

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

5 комментариев к «Простая анимация CSS (спрайты)»

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

    Распакуйте скачанный архив примера, запустите index.html из примера, наведите указатель мыши на картинки на странице — они двигаются? Если да, значит, принцип работает.

    Попробуйте в этом же примере добавить свою картинку. Для этого сначала сделайте в Фотошопе двухкадровое изображение, затем скопируйте, переименуйте и внесите изменения в имена, размеры и смещения CSS-классов (ведь ваша картинка не обязательно такого же размера, как в примере и на величину смещения это тоже влияет).

    Вероятно, причина в невнимательности: или имя CSS-файла неверное указали, или пути к картинкам или их размеры и смещение неправильное. Начните заново, постепенно меняйте пример так, как вам нужно и проверяйте после каждого изменения, не пропала ли работоспособность кода. Удачи 🙂

  2. что то не получилось. уж извините меня, флудершу.
    стиль, я так поняла, пишем в отдельном документе, а в самой страничке делаем на него ссылку так? вот стиль написать получилось(инструкция подробная, спасибо) а вот код не работает. скачала коды к этому уроку, так там код вообще другой.  не < span class…>, a <div class…>. может разницы не имеет, но обьясните пожалуйста.

  3. Да не, нормально всё, по крайней мере, такое возможно — точно. И работать будет действительно во многих браузерах.

  4. Будет работать, если пользователь не отключил стиль страницы или не применяет свой. Тогда на сайте, который приведен в качестве примера, ничего не работает и даже не видно. Это неправильно

  5. Зачем дублировать свойства .english в .english а? нет смысла в переназначении, можна было управиться в два класа.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *