Выбрасываем Flash, кочегарим Javascript: Анимация. (Урок)
Здравствуй, Хабрачеловек!
Если ты идешь по пути веб-мастера, знаком с HTML и CSS, то этот небольшой урок как-раз для тебя.
Мы сегодня научимся делать красивую анимированную шапку для твоих веб-сайтов.
Примерно такую, как на веб-студии Perevaga.com (Читается пэрэвага, в переводе с украинского — преимущество, превосходство)
Очень часто такие вещи делают на flash, но ты же сам прекрасно понимаешь что далеко не у всех установлен flash-плеер, а многие его выключают принудительно, дабы оградить свой мозг от навязчивой, лезущей во все дыры рекламы.
Конечно же если так размышлять то можно сказать и о том, что есть еще люди, которые отключают javascript и картинки, но пользователь без javascript ничего не потеряет, у него будет отображаться фоновая картинка, просто не анимированная.
Преимущество данного метода — кросбраузерность, полный отказ от flash. Не все правда так просто, есть в этом методе свои грабли, с чем мы и будем бороться дальше в этом уроке.
Из недостатков — несколько большая нагрузка на процессор, все-таки flash под это лучше заточен, в следствии чего на очень слабеньких машинах анимация может подтормаживать и дергаться.
Итак, хватит болтать!
Создаем пустой html документ, в моем примере он выглядит так:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Урок</title>
<style type="text/css">
</style>
</head>
<body>
</body>
</html>
Первым делом пропишем в секцию style цвет фона для документа. Ели вы хотите например белый фон, все равно задайте его, т. к. он не у всех белый по умолчанию, это зависит от системного цвета в настройках окошек.
И сразу же зададим нулевые отступы
<style type="text/css">
body{background-color:#FFFFFF; padding:0; margin:0;}
</style>
Создадим элемент <div id="head"></div>. Это будет шапка документа, туда же мы кинем и анимированный фон. id нужно задать, чтобы потом получить к этому элементу доступ из javascript.
Теперь нужно собственно найти какую-нибудь красивую бесшовную по вертикали текстуру, которую мы бросим на задний фон.
Или к примеру сфотографировать красивое небо и закольцевать его вручную. Ты можешь узнать, как это сделать у google. Спроси про «создание бесшовных текстур».
Я вот себе сделал
Она кстати является объектом, защищенным авторским правом, так что если захочется где-то применить, спроси сначала у меня.
Допустим, небо у нас уже есть и оно лежит в img/sky.jpg. Определим теперь стиль для нашей шапки, чтобы там было небо: вставляем в секцию <style> следующий код:
#head {
background: url(img/sky.jpg) repeat-x;
width:100%;
height:429px;
}
Только не забудь вписать туда высоту своей картинки, у тебя вряд-ли будет 429px.
Теперь логотип/заголовок. Как ты можешь видеть, в моем примере он достаточно красивенький.
Немалую роль в этом сыграл 8-битный канал прозрачности. Для этого нужно сохранять картинку в формат PNG-24.
Конечно, ты можешь использовать и GIF или PNG-8 с присущей им 1-битной прозрачностью, но только в том случае, если фоновая картинка достаточно однородна, тогда тебе следует задать цвет matte (например в photoshop ты можешь найти этот пункт при сохранении изображения для веба) таким, в который окрашена наибольшая часть твоей фоновой картинки.
Но вот если ты хочешь к примеру отражение под логотипом, как в моем примере (это же так модно в эпоху web2.0!), тогда твой выбор — png-24. Правда он немного больше весит и для корректного его отображения в IE6 нам придется потом вставить один костыль, о котором пойдет речь ниже.
Итак, добавляем логотип внутрь шапки: <img id="logo" src="img/logo.png"/>, а в секцию head вставляем где нибуть такой код:
<!--[if lt IE 7]>
<![if gte IE 5.5]>
<script type="text/javascript">
function fixPNG(element)
{ var src;
if (element.tagName=='IMG')
{
src = element.src;
element.src="blank.gif";
}
element.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "',sizingMethod='scale')";
}
</script>
<style type="text/css">
#logo{ filter:expression(fixPNG(this));}
</style>
<![endif]>
<![endif]-->
Еще нужно строго указать размер картинки, чтобы этот хак работал. Сделаем это к примеру через стили: #logo{width:596px; height:89px}
Да, не забудь бросить в папку с твоим документом прозрачную картинку blank.gif размером 1×1 пиксель. Можешь взять .
Это и есть костыль, о котором говорилось выше. Если кто-то юзает такой старый хлам, как IE младше версии 5.5, можем ему посочувствовать. Он не увидит нашу красоту. Если интересна данная тема, погугль по запросу «IE6 PNG прозрачность».
Теперь неплохо бы нормально расположить нашу картинку. Для этого отцентрируем содержание шапки (добавим правило text-align:center для элемента head); и зададим верхний отступ для логотипа (margin-top:150 для logo)
И наконец-то мы дошли собственно к анимации. Добавляем код в самый конец документа, перед закрывающим тегом </body> (можете использовать как альтернативу window.onload):
<script language=»Javascript»>//Да-да-да, сейчас мы будем что-то двигать
var sky_pos = 0;
var sky = document.getElementById(‘head’); //Незачем в каждой итерации цикла искать элемент документа с шапкой, запихнем в переменную.
setInterval(function(){sky.style.backgroundPosition = sky_pos+++’px 0px’},45);//Поехали!</script>
Еще немного пояснений: setInterval(f,t) — вызывает функцию, переданную первым параметром через каждые t миллисекунд. Со значением t можете поэкспериментировать, для более систем со слабеньким процессором лучше ставить немного меньшие значения, но слишком разгонять ваше небо тоже не стоит, это может показаться посетителям вашего сайта не таким клевым, каким это кажется вам.
Можешь так же добавить сдвиг фона обратно, когда он достигнет значения, кратного его ширине, т. к. теоретически когда-то backgroundPosition станет ооочень большим 
.
А теперь займемься немного оптимизацией: когда пользователь открывает другое окно или переключается на другую вкладку в браузере, мы можем отключить анимацию.
В идеале можно было бы совсем отключить вызов нашей функции каждые N милисекунд, но дабы не усложнять свою жизнь поступим просто, добавим флажок:
<script language="Javascript">//Да-да-да, сейчас мы будем что-то двигать
var sky_pos = 0;
var b=true;
var sky = document.getElementById('head');
setInterval(function(){b?sky.style.backgroundPosition = sky_pos+++'px 0px':void(0);},35);
</script>
А в теге body добавим обработчики событий: onBlur=»b=false» onFocus=»b=true»
Готово! Можешь переключиться на какое-то окошко а потом обратно и заценить результат. Если при виде этого зрелища кровь просто бурлит в твоих оптимизаторских венах — можешь еще немного поизвращаться и сделать так, чтобы анимация отключалась, когда она уходит из зоны видимости в результате скроллинга. (За идею спасибо Дмитрию aka
И последний момент: Все как бы клево, но тебе может не понравится, как ведет себя курсор в IE6. Дело в том, что он, бедненький не может нормально кэшировать картинки, из-за этого курсор все время мерцает и рядом то появляются, то исчезают песочные часики.
Но не расстраивайся! Нафига нам пользователи, которые юзают устаревший браузер? Шучу Мы остановим бешенство курсора. Для этого проапгрейдим наш жабаскрипт, находящийся в условных комментариях для определения старых версий ИЕ.
Пишем это: document.execCommand("BackgroundImageCache",false,true); (Для непонятливых –нужно вставить эту строку перед function fixPNG).
Вуаля, готово!
Иатак, получившийся у нас код:
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″ />
<title>Урок</title>
<style type=»text/css»>
body{background-color:#FFFFFF; padding:0; margin:0;}
#head {
background: url(img/sky.jpg) repeat-x;
width:100%;
height:429px;
text-align:center;
}
#logo{width:596px; height:89px; margin-top:150px;}
</style>
<!–[if lt IE 7]>
<![if gte IE 5.5]>
<script type=»text/javascript»>
document.execCommand(«BackgroundImageCache»,false,true);
function fixPNG(element)
{ var src;
if (element.tagName==’IMG’)
{
src = element.src;
element.src=»blank.gif»;
}
element.runtimeStyle.filter = «progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’» + src + «‘,sizingMethod=’scale’)»;
}
</script>
<style type=»text/css»>
#logo{ filter:expression(fixPNG(this));}
</style>
<![endif]>
<![endif]–>
</head>
<body onBlur=»b=false» onFocus=»b=true»>
<div id=»head»>
<img id=»logo» width=»596″ height=»89″ src=»img/logo.png»/><br>
</div>
<div>А здесь будет содержание страницы</div>
<script language=»Javascript»>//Да-да-да, сейчас мы будем что-то двигать
var sky_pos = 0;
var b=true;
var sky = document.getElementById(‘head’); //Незачем в каждой итерации цикла искать элемент документа с шапкой, запихнем в переменную.
setInterval(function(){b?sky.style.backgroundPosition = sky_pos+++’px 0px’:void(0);},35);//Поехали!</script>
</body>
</html>
То что получилось у меня можно лицезреть
Надеюсь, ты нашел эту статью полезной для себя. В качестве благодарности можешь мне подогнать бочку пива, просто сказать спасибо или плюснуть . Очень жду комментариев. Так же пойдут на пользу дела отзывы о работе этого счастья в браузерах, которые я не упоминал выше.
Если есть желание разместить статью на своем сайте — не забудь кинуть ссылку Это обязательно.
Jkz
30 Июл, 2010
не двигается
Jkz
31 Июл, 2010
заполнилось пространство шапки фоном, но он не производит вообще никаких движений, нет эффекта как тут