Создание красивой шапки для сайта

 

Совсем недавно, гуляя по всемирной паутине, я наткнулся на шапку сайта, который я раньше как то не замечал (но уверен что подобное было) на др сайтах... В шапке отображалось несколько изображений, которые плавно меняли друг друга... С ява скриптом я собственно немного дружу, так, что мне стало интересно как это реализовано...Я предполагал, что для этого используется какой нить CSS стиль, и как выяснилось потом, был прав... В интернете нашел синтаксис стиля, а изменять его показатель дело не хитрое =)) К чему я все это пишу, так к тому что сайт выложил буквально несколько часов назад, а написать на нем нечего, вот решил написать небольшой урок, а для темы выбрал именно эту шапку, так что вот мой первый, корявый урок =)) приступим...

 

 

Начнем с того, как сделать изображение прозрачным? На помощь нам приходит CSS. А именно filter:alpha(opacity=100); для IE, и opacity:1.0; для остальных популярных браузеров. Что бы в IE сделать изображение прозрачным ставим filter:alpha(opacity=...) равную от 0 до 100, если значение равно 100 то изображение будет полностью видно, а 0 соответственно полностью прозрачное. Для остальных браузеров используется значение opacity:... от 0.0 до 1.0, т.е. для того чтобы установить прозрачность 50% для IE пишем:

filter:alpha(opacity=50);

а для остальных браузеров:

opacity:0.5;

С помощью чего нам делать изображение прозрачным, мы разобрались..что дальше? Я не знаю как вы, но мне известен лишь 1 способ менять значения в разметки страницы без перезагрузки самой страницы, и этот способ функция на javascript'е. Но прежде чем приступить к написанию самой функции, необходимо для начала создать те самые изображения для изменения. Я выбрал способ наложения 1-ого изображения на другое при помощи CSS, а именно использовал position:absolute;

Вот код CSS:

.logo//Собственно название класса
{
width:700px;//Ширина изображения
height:250px;//Высота изображения
position:absolute;//Абсолютная позиция на экране
left:50%;//Отступаем слева на 50%, этим мы добьемся позиционирование верхнего...
//...правого края изображения непосредственно в центре экрана
top:25px;//Отступаем от верха на 25px
margin-left:-350px;//Двигаем изображения влево на минус...
//..350px (Ширина изображения поделена на 2)...
//...Так мы разместим изображение ровно по центру экрана
background-repeat:no-repeat;//Не даем изображению размножаться ни по
// X оси, ни по Y
background-position:left top;//Располагаем изображение в левом верхнем углу
//контейнера, который создадим позже
}

Сами изображения мы поместим в контейнер div не посредственно на самой страничке. Называем их по номерному порядку (1,2,3,4...n) Разместим логотип в таблице, шириной в 700 пикселей, создадим в таблице 2 тега div, применим к ним стиль logo и подредактируем стиль в ручную для каждого div, вот что получится:

<table width="700" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td colspan="2" width="700px" height="250px">
<div id="imgtwo" class='logo' style='//1-ый div с 1-ым
//видимым изображением
background-image:url(img/1.jpg);'>//вставляю через css изображение
</div>
<div id="imgone" class='logo' style='//2-ой div c 2-ым, но уже не
//видимым, изображением
background-image:url(img/2.jpg);//ссылка на изображение
filter:alpha(opacity=0);//Определяю его как не видимый для IE
opacity:0.0;'>//так же для остальных браузеров изображение
//прозрачно
</div>
</td>
</tr>
</table>

Заметьте, что у каждого div'а есть свой id (imgone и imgtwo) они нужны для того чтобы через javascript отыскать эти div'ы (для меня такой способ удобнее остальных) Сейчас если запустить написанное, то мы увидим логотип в центре экрана, но он не будет пока меняться... Для изменения нужно написать java функцию...

Так, теперь немного логики. При запуске страницы, запускается скрипт, который через n-е количество секунд начнет изменять в положительную сторону css элемент filter:alpha(opacity=0); скажем, на единицу, а opacity:0.0; на 0.01 (тоже на единицу =)) Как только 2-ое изображение станет полностью видимым, мы его перемещаем из 2-ого div'а в 1-ый. После чего скидываем filter:alpha(opacity=100); на 0, а opacity:1.0; на 0.0 Визуально вы ничего не заметите, так как в обоих div'ах у нас одно и тоже изображение, так что быстрая смена прозрачности одного из них незаметна. Следующем шагом будет добавление 3-ого изображения в уже прозрачный 2-ой div. После чего начинаем цикл заново, изменяя элемент css filter:alpha(opacity=0); и opacity:0.0; в положительную сторону, но уже для 3-ого изображения...

Собственно вся логика =)

Сначала определим переменные которые будут содержать в себе начальную информацию:

var start = 5000;//первое обновление картинки произойдет через 5 сек
var speed = 25;//скорость смены картинок составляет 25 мсек кадр
var img = 4;//показываются 4 картинки
var while_img = 1;//Переменная отслеживает сколько циклов прошло, ведь для
//того чтобы отследить когда запустить весь скрипт
//с самого начало (т.е. когда заместо последнего изображения показать первое)
//нужно считать циклы
//(Есть и др способы, но я склонился к этому)
var glob_timer = 0;//Переменная варьируется в значениях от 0 до 1. Воткнул ее для
//отслеживания самого первого цикла, а именно пауза в 5 сек
var opacity = 0;//Эту переменную будем менять от 0 до 100 тем самым отследим когда
//изображение полностью прозрачно, и когда полностью видимо,
//эдакое отслеживание кадров...
//Т.к мы будем менять прозрачность на 1 единицу каждый 25 мсек, то всего кадров
//у нас будет 100
var txt_IE_u = 0;//Значение которое будем записывать в filter:alpha(opacity=...);
var txt_OR_u = 0;//Значение которое будем записывать в opacity:..;

Вот сам скрипт:

function logo(t,u)//Название функции(название 1-ого изображение, 
//название 2-ого изображения)
//Я для название изображений использовал нумерацию, это облегчило мне
//задачу подмены изображений
{
var imgone = document.getElementById("imgone");//Для небольшого...
var imgtwo = document.getElementById("imgtwo");//...упрощения записи
if(glob_timer == 1)//Отслеживаем первый ли запуск скрипта, или второй и
//последующий...
{
if(opacity == 0)//Если изображение еще не меняло свою прозрачность
//то устанавливаем невидимое изображение и рассчитываем ее прозрачность
imgone.style.backgroundImage = "url(img/"+u+".jpg)";//Установили изображение
// в прозрачный div
txt_IE_u++;//Увеличили его прозрачность на 1 в IE
txt_OR_u = txt_IE_u/100;//Увеличили прозрачность для остальных браузеров
}
imgone.style.filter = "alpha(opacity="+txt_IE_u+")";//Записали в div новую
//прозрачность для IE
imgone.style.opacity = txt_OR_u;//Записали в div новую прозрачность для
//остальных браузеров
if(glob_timer == 0)//Отслеживаем первый запуск скрипта
{
glob_timer++;//Меняем переменную на 1, для того чтобы этот кусок кода б
//ольше не всплывал
setTimeout("logo("+t+","+u+")", start);//Вторичный запуск скрипта через
//5 сек (переменная start = 5000 мсек)
}
else//Если скрипт уже запускался, и это его 2-ой цикли или более чем второй =)
{
if(opacity != 100)//Если изображение еще не прозрачное (т.е. < 100)
{
setTimeout("logo("+t+","+u+")", speed);//Запускаем скрипт по новой,
// но уже со скоростью в 25 мсек
opacity++;//изменяем переменную на единицу
}
else//Если изображение полностью видимо
{
while_img++;//Увеличиваем переменную на 1 т.к. мы полностью изменили
//видимость изображения
if(while_img < img){t++;u++;}//Если кол-во пройденных циклов
//меньше кол-ва изображений
//для показа то меняем оба названия изображения на единицу
//(если при старте скрипта у нас 1-ое
//изображение имело имя "1" а второе "2", то сейчас
//изображения будут иметь названия "2" и "3")
if(while_img == img){t++;u = 1;}//Если кол-во пройденных циклов равно
// кол-ву изображений
//для показа, то скрипт понимает, что это последний цикл и
//устанавливает в качестве невидемого изображения первое
// изображение
if(while_img > img){t = 1;u++; while_img = 1}//Если последний цикл
//пройден то устанавливаем значения на стартовые
glob_timer = 0;//Сбрасывает отслеживание на 1-ый запуск скрипта
opacity = 0;//Сбрасываем отслеживание на прозрачность
//изображения
txt_IE_u = 0; //Сбрасываем значение для filter:alpha(opacity=...);
txt_OR_u = 0;//Сбрасываем значение для opacity:..;
imgtwo.style.backgroundImage = "url(img/"+t+".jpg)";//Заменяем
//изображение из 2-ого div'а в 1-ый
setTimeout("logo("+t+","+u+")", 1);//Запускаем цикл заново
}
}
}

Еще раз повторюсь, что изображения должны иметь численное имя (1,2,3,4...n) Так же хочу заметить, что мой скрипт не идеален, и что скорее всего есть более упрощенная альтернатива!
Вот ссылка на пример работы скрипта

 

Возможно Вам будут интересны следующие заметки

Комментарии (0)

Ваше имя *
Сайт
Ваш E-mail *
Ваше сообщение *
 
К данной статье пока нет комментариев.