Главная > Секреты верстки сайтов > Простая анимация для сайта средствами CSS

Простая анимация для сайта средствами CSS

Самые красивые и яркие анимационные ролики для веб-сайтов создаются, конечно же, с помощью технологий Adobe Flash и Microsoft Silverlight. Но далеко не всем веб-сайтам нужны дорогостоящие и трудоемкие анимационные шапки, а меню на flash еще и очень плохо индексируются. Уже никого не удивляют акционные баннеры, иконки или графические меню, которые могут слегка меняться при наведении на них указателя мыши.

Интерактивная анимация, которая состоит всего из двух кадров (активно/неактивно), имеет ряд преимуществ: она недорогая, легко создается, быстро загружается и при этом заметно оживляет сайт, делая его более дружественным для посетителя. Чаще всего такая двухкадровая анимация, реагирующая на действия пользователя, создается с помощью 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-анимации.

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

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

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

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

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

1. Более простой и понятный код.

2. Картинка загружается сразу вся, потому нет задержек при подгрузке второго кадра с помощью JavaScript.

3. Анимация будет работать в любом случае, даже если в браузере пользователя отключена возможность выполнения скриптов JavaScript или запрещена анимация flash и gif.

4. Анимация с помощью CSS одинаково работает во всех браузерах, выпущенных даже 5 лет назад.

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

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

Читайте также:

Что такое скрипты и как они работают

Как делать красивые интерфейсы сайтов

Что такое микроразметка сайта

Правильный движок для портала – залог успешности ресурса

Схема запуска онлайн-магазина

5 комментариев к “Простая анимация для сайта средствами CSS”

маля пишет:
25 июля, 2009 at 17:28

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

Alexandr пишет:
25 июля, 2009 at 18:10

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

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

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

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

krock пишет:
5 января, 2011 at 13:40

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

Paule пишет:
2 июля, 2011 at 15:32

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