Cпрайты: Изначально это компьютерная или игровая 2d, 3d графика. В веб технологии их называют css спрайты. Самое интересное что посредством css береться или обрезается нужный кусок, что экономит трафик и ускоряет загрузку нашей html страницы - браузеру потребуется запрашивать меньше файлов.
Предлагаю сразу просмотреть урок по генератору css sprite's.
http://csssprites.com/ Не реклама, сайт не мой, если появиться генератор на сайте, буду рад переснять урок.
Сохраненое изображение:
Скрипт и его особенности; На самом деле для такой особенной анимации сам код не большой и его можно внедрить или украсить любую часть сайта. Поддержка прозрачного кода(transparent), на выходе получается как flash анимация, но нагрузки на нее в разы меньше. Я использовал две css position: relative; для первого вида и absolute; для второго более сложного с фоном и дополнительным элементом. Кому то может мой урок покажеться сложным и замудренным, но поверьте я старался максимально упростить устоновку и сделать наибольшую функциональность ее изменения, к тому же это просто интересно.
Загружаем по ftp: Папку "Img" jquery.spritely-0.1.js Примечание: в архиве имееться - jquery-1.3.2.min.js, на ucoze уже подключен свой, так что нам его подключать не нужно. Так на всякий случай.
<script type="text/javascript"> (function($) { $(document).ready(function(){ var stage_left = (($('body').width()-866) / 2 ); // Движение в странице. var stage_top = 40; // Движение в странице по этапам. $('#plane1').sprite({fps: 8, no_of_frames: 5}) // Скорость анимации и количество фреймов. .spRandom({ top: 0, // Позиция вверх,вниз и т.д.. left: 20, // На лево,сколько шагов. right: 220, // На право,сколько шагов. bottom: 0, // Режим полета. speed: 2500, // Скорость движения. pause: 300 // Пауза в движении. }); }); })(jQuery); </script> <div id="plane1"></div>
Ширина и высота (width,height), должны быть размером не больше одной исходной картинки из анимации. Остальное все подписано в скрипте так, что при устоновке не нужно удалять, это делается для того чтоб вы знали какая функция и за что она отвечает на функциональность скрипта она не влияет. Мы получаем танк с движением назад, вперед. Чтобы заставить танк стоять на месте берем из кода выше строчку:
Code
left: 0, // На лево,сколько шагов. right: 0, // На право,сколько шагов.
И ставим по нулям. Анимация будет идти, а танк будет стоять на месте.
Для интереса,я усложнил задачу.
Скорей всего подойдет для страниц с персональным шаблонам и глобальных блоков.
<script type="text/javascript"> (function($) { $(document).ready(function(){ $('#forest').pan({fps: 30, speed: 1, dir: 'left'}); // Фон синего - космического леса.Имееться кадры, скорость, в правую или левую сторону анимации. $('#star').sprite({fps: 111, no_of_frames: 99}) // Мигающая звезда.Кадры,частота. .spRandom({left: 70 , right: 999, speed: 1700}) // Мигающая звезда. Отступы и положение звезды от окна, скорость движения. $('#sky').pan({fps: 30, speed: 0.5, dir: 'left'}); // Звездный фон. Кадры, скорость, влево, вправо. var stage_left = (($('body').width()-866) / 2 ); // Движение в странице. var stage_top = 0; // Движение в странице по этапам. $('#plane1').sprite({fps: 9, no_of_frames: 8}) // Скорость анимации и количество фреймов. .spRandom({ top: 40, // Позиция вверх,вниз и т.д.. left: + 200, // На лево,сколько шагов. right: + 500, // На право,сколько шагов. bottom: 100, // Режим полета. speed: 5500, // Скорость движения. pause: 0 // Пауза в движении. }); }); })(jQuery); </script>
В скрипте все подписано, на функциональность скрипта это не влияет. Самое не обчное, что я использовал так это мигающия, с светлым бликом звезда. Я использовал промежуточные кадры, где звезды нету и анимацию блика.