CSS-спрайты качают!

Количество технологий анимации сегодня таково, что художнику компьютерной графики приходится больше ломать голову не над самой реализацией задачи, а над выбором оптимального решения. О чём, например, думаю я, когда вижу статичное изображение (приличного содержания), которое в будущем должно стать анимационным фрагментом сайта: «Растр, вектор, а может gif? Или нет flash! Или flv-подложку в After Ef... сделать? А может...» и т.д.

Конечно, можно сделать классическую покадровую анимацию в gif, но тогда как быть с возможностью интерактивного воспроизведения (например при подведении курсора мыши на ролик)? Значит необходим Flash! Но если это небольшой фрагмент размером 70x75 и находится практически на фоне блока — «мусорить» на сайте Flash-ем ради такого: 

В данном примере (подводим курсор к иконку телефона — он начинает качаться) можно обойтись парой десятков кадров gif, png, jpg и т.д. В веб-верстке есть такая технология как «css-спрайты», а в видео — filmstrip, кинопленка. В принципе, как по мне, это одно и тоже. В фиксированном блоке фоном проигрываются кадры с определенной частотой. В случае с телефонной трубкой — то что надо!

1. Подготавливаем статичный файл для css-спрайта

Нам необходима видеопленка (фоновое изображение), которую в дальнейшем программист  сможет проиграть в спозиционированном диве (<div>).

В css фон позиционируется через параметр «background-position», в котором необходимо прописать координаты _x и _y, но в нашем случае эти координаты будут меняться динамически с определенной частотой скриптом (JavaScript).

Если необходимо наложить анимацию на фон — можно сохранить файл в формате .png с прозрачностью или, персонально для IE6, в .gif с прозрачностью, но при это главное не забыть назначить параметр «Matte» (так называемая заливка для пикселей с полупрозрачностью).

В нашем случае необходимо проиграть анимацию на фоне облаков, — .png  подходит (формат изображения никаким образом не будет влиять на ход анимации, можете хоть 1000  кадров в .jpg с максимальным разрешением проиграть).

Напомним, что блок (<div>) с нашим фоном равен w70 на h75 пикселей, а значит кадр равен столько же — 70x75. Выстроим кадры по вертикали таким образом, чтобы соблюдался шаг по вертикали _y(75px). 

2. Воспроизводим

На данном этапе эстафета передается программисту, который путем заклинаний заставит работать необходимый алгоритм: пользователь подводит курсор к диву (с фиксированной высотой и шириной), и фон внутри меняет свои параметры position по оси _y кратно 75px(высоте кадра) с определенным временным интервалом. 

То, что получилось, можно увидеть в магазине ПУПС.