Если ты идешь по пути веб-мастера, знаком с 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 размером 1x1 пиксель. Можешь взять мою.
Это и есть костыль, о котором говорилось выше. Если кто-то юзает такой старый хлам, как 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"
И последний момент: Все как бы клево, но тебе может не понравится, как ведет себя курсор в 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>
То что получилось у меня можно лицезреть здесь
Скопипастено отсюда
© Степаненко Виталий, 2008
Комментариев нет:
Отправить комментарий