Текст описывает инструменты и обстоятельства на указанную дату. Пункты меню старых программ и сведения о сервисах могут отличаться от действующих.
Самые красивые и яркие анимационные ролики для веб-сайтов создаются, конечно же, с помощью технологий Adobe Flash и Microsoft Silverlight. Но далеко не всем веб-сайтам нужны дорогостоящие и трудоемкие анимационные шапки, а меню на flash еще и очень плохо индексируются. Уже никого не удивляют акционные баннеры, иконки или графические меню, которые могут слегка меняться при наведении на них указателя мыши.
Интерактивная анимация, которая состоит всего из двух кадров (активно/неактивно), имеет ряд преимуществ: она недорогая, легко создается, быстро загружается и при этом заметно оживляет сайт, делая его более дружественным для посетителя. Чаще всего такая двухкадровая анимация, реагирующая на действия пользователя, создается с помощью JavaScript или 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"></a></span> |
Вот и все, анимация готова. Вы можете посмотреть результат на сайте или бесплатно скачать все коды этого урока.
По сравнению с анимацией JavaScript способ создания двухкадровой анимации с помощью стилей CSS имеет ряд преимуществ:
1. Более простой и понятный код.
2. Картинка загружается сразу вся, потому нет задержек при подгрузке второго кадра с помощью JavaScript.
3. Анимация будет работать в любом случае, даже если в браузере пользователя отключена возможность выполнения скриптов JavaScript или запрещена анимация flash и gif.
4. Анимация с помощью CSS одинаково работает во всех браузерах, выпущенных даже 5 лет назад.
5. Смена кадров при наведении указателя мышки происходит мгновенно, нет никакой задержки даже на самых слабых компьютерах.
Описанный в этом уроке способ делать анимацию с помощью стилей CSS можно применять практически на любом сайте, например, для изменения цвета иконок для контактов, поиска, карты сайта и т.п. при наведении на иконку указателя мышки.
Источник публикации
Сохранённая версия Web Article. Первоначальная дата: 2009-07-22. Сторонние рекламные вставки, счётчики и формы прежнего шаблона не включены.