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

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

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

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

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

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

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

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

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

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

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

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

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

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

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