Контакты

Для связи с нами можно использовать:
irc://irc.chatnet.ru:#gfs
icq://546460
email://cobalt[@]gfs-team.ru

Все материалы предоставлены только с ознакомительной целью
ГлавнаяСтатьиКодингJavaScript VS FLASH
© pridu_ROCK aka Rocky 06.05.2006 статья не оптимизирована

Как то поздно вечером сидя на нашем канале #GFS зашел речь о нашем новом

дизайне и в частности о Flash анимации на нашем сайте.

Я начал выёживаться и стал говорить, что точно такую же анимацию можно

сделать с помощью JavaScript (JS) и Css.

 

Ну что ж сегодня мы попробуем подтвердить мои слова и показать что c

помощью JS можно достигнуть вполне интересных эффектов.

И так приступим: Я взял уже готовую Flash анимацию с нашего сайта и

просто нарезал маленькими рисунками а точнее на 3 куска.

 

            1 - Верхняя рамка.(up.gif)

            2 - Нижняя рамка.( niz.gif)

            3 - Задний фон (polos.jpg)

 

Для Рамок берем GIF так как нам нужна картинка без фона.

И так начнем создавать 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"&gt 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>

 

Ну что ж пора посмотреть что же у нас получилось сделать =)) ?

 ЛОГО

 

Ну что ж у нас получилось сделать почти идентичную анимацию с помощью

JS но это получилось намного муторней чем со Flash, по пути создания

анимации всплыло куча подводных камней: Каждый Браузер ведет себя

как хочет, если JS будет отключено будет некрасиво(но это можно

отследить и если JS выключено то пользователю кидать

просто какой-нибудь рисунок),если картинки большого размера надо всегда

ставить задержку на появление анимации, думая о пользователях

которые сидят на модеме =))

 Выводы:

  1 - Мне удалось подтвердить свои слова =)) (самый главный вывод =)) )

  2 - Если делать какую то сложную анимацию, то всегда лучше Flash.           




© pridu_ROCK aka Rocky 06.05.2006 статья не оптимизирована

e-Commerce Partners Network
lol написал:

хуйня

nosferatu написал:

лол))

Ник:

Текст:
P Br B I Qute



Код: обновить
Последние комментарии
19.11.2017 01:19:37 Dmitriyvah написал:
byncecopesy SlaltPog Kt ...
Пишем guestbook
18.11.2017 23:02:45 GlebNes написал:
hem unuby Osteotsematte ...
Пишем guestbook
18.11.2017 18:42:56 ViktorTap написал:
Zof edifam Weque ...
Пишем guestbook
Реклама

Тут должна была быть ваша реклама, но мы потеряли глиняную табличку с ее текстом. SapeId: 665044

Rambler's Top100