| Pridu_ROCK |
18.05.2007 19:53 |
JavaScript VS FLASH
JavaScript VS FLASH
Автор: pridu_ROCK aka Rocky
Дата:06.05.2006
©GFS
Как то поздно вечером сидя на нашем канале #GFS зашел речь о нашем новом дизайне и в частности о Flash анимации на нашем сайте.
Я начал выёживаться и стал говорить, что точно такую же анимацию можно сделать с помощью JavaScript (JS) и Css.
Ну что ж сегодня мы попробуем подтвердить мои слова и показать что c помощью JS можно достигнуть вполне интересных эффектов. И так приступим: Я взял уже готовую Flash анимацию с нашего сайта и просто нарезал маленькими рисунками а точнее на 3 куска.
1 - Верхняя рамка.(up.gif)
2 - Нижняя рамка.( niz.gif)
3 - Задний фон (polos.jpg)
Для Рамок берем GIF так как нам нужна картинка без фона. И так начнем создавать Html документ вот что он собой представляет:
Код HTML:
<style>
#first {background-image: url(polos.jpg); background-repeat:no-repeat;position:fixed;}
#links {margin-top:-23px; margin-left:430px; font-size:12px; color:484848;font-Weight:bold;}
#Big_text {margin-top:-3px; margin-left:90px; font-size:30px; color:#a8a8a8}
</style>
<table border = 0 height = 110pt width = 770pt id="first">
<tr><td valign =top width="770">
<div id = "verh"><img src = "up.gif"></div>
<div id = "links"> News Articles Releases Bugtrak Forum About</div>
<div id = "Big_text"> Group of Freedom Search</div>
<div id = "niz"><img src = "niz.gif"></div>
</tr></td></table>
Так ну теперь время скриптов =)) :
Код:
<script>
brauzer = navigator.appName; // считываем с помощью какого браузера зашел пользователь
if (brauzer=="Microsoft Internet Explorer") // приминение стилей для IE и Netscape
{
niz.style.marginTop = "-10px"; niz.style.marginLeft="-90px"; verh.style.marginTop = "-3px"; verh.style.marginLeft="700px";
verh_top_1 = 710;raz=70;
}
else
{
niz.style.marginTop = "-10px"; niz.style.marginTop = "-15px"; niz.style.marginLeft="-90px"; verh.style.marginLeft="700px";
verh_top_1 = 710; links.style.marginTop ="-17px";raz=68;
}
i = 0;
col=10101;
i2 = 0;
i3 = 430;
function color() // функция для изменения цвета
{
if (i3>40) {i3 =i3-0.09; links.style.marginLeft =i3; } // тут происходит сдвиг меню
else
{i3++;}
col += 10101;
tc = 484848 + col;
links.style.color = "#" + tc ; // изменение цвета меню
if (col>505050){clearTimeout(c);}
else
c = setTimeout(color,10);
}
function move_1() // функция для перемещения верхней рамки
{
{i2++;}
verh.style.marginLeft = verh_top_1 - i2 ;
if (i2>100){clearTimeout(s);color();}
else
s = setTimeout(move_1,10);
}
function move_2() // функция для перемещения нижней рамки
{
if (i>35){i = i+0.5; }
else
{i++;}
niz.style.marginLeft = i - 69;
if (i>raz){clearTimeout(t);}
else
t = setTimeout(move_2,10);
}
move_2();
move_1();
</script>
Ну что ж пора посмотреть что же у нас получилось сделать =)) ?
ЛОГО |
