Подскажите пожалуйста как Анимировать тест Например фраза
С Новым Годом
Хочется что бы буквы этой фразы хаотично подпрыгивали
Подскажите Стоит ли писать это на JavaScript
Или сразу попробывать на Flash MX

или в фотошопе нарисовать гифку

Спасибо С рисование не очень Придется лезть во Flash

Цитата

Подскажите пожалуйста как Анимировать тест Например фраза С Новым Годом

Цитата

Придется лезть во Flash

Возможно тебе подойдет использование слоев, а с ними тебе сдесь помогут разобраться

Осталось только написать функцию, в которой с помощью setTimeout можно будет задать щевеления буквами. А для написания нужно время. Написать НЕ обязуюсь, (времени нет ), попробуй сам, но скорей всего кто нибуть тебе поможет.

Код

<html> <head>  <title>Простой JS сценарий</title>   <style type="text/css">      .layer1      { background-color: green;       left: 10px;       position: absolute;        top: 0px;       visibility: visible       }      .layer2      { background-color: red;       left: 30px;       position: absolute;        top: 0px;        visibility: visible;       }           .layer3      { background-color: blue;       left: 50px;       position: absolute;        top: 0px;         visibility: visible;       }      .layer4     { background-color: silver;       left: 70px;       position: absolute;        top: 0px;       visibility: visible;         }     .layer5     { background-color: green;       left: 90px;       position: absolute;        top: 0px;       visibility: visible;      }         .layer6      { background-color: green;       left: 110px;       position: absolute;        top: 0px;       visibility: visible       }        .layer7      { background-color: red;       left: 130px;       position: absolute;        top: 0px;        visibility: visible;           }       .layer8     { background-color: blue;       left: 150px;       position: absolute;        top: 0px;         visibility: visible;       }       .layer9     { background-color: silver;       left: 170px;       position: absolute;        top: 0px;       visibility: visible;         }          .layer10     { background-color: green;       left: 190px;       position: absolute;        top: 0px;       visibility: visible;      }    .layer11     { background-color: green;       position: absolute;       left: 210px;       top: 0px;       visibility: visible;     }      </style>   <script type="text/javascript" language="JavaScript">   <!--       //Сюда надо вписать функцию которая будет двигать буквы   //--> </script> </head>  <body>    <div class="layer1">С</div>   <div class="layer2">Н</div>   <div class="layer3">О</div>   <div class="layer4">В</div>   <div class="layer5">Ы</div>     <div class="layer6">М</div>   <div class="layer7">Г</div>   <div class="layer8">О</div>   <div class="layer9">Д</div>   <div class="layer10">О</div>     <div class="layer11">М</div>    </body> </html>

merfi

Есть формат GIF, есть проги для редактирования, советую GIF Movie Gear, и займёт намного меньше флэша и поддерживается везде и скрипты писать ненадо, а нарисовать прыгающий текст - несеолько минут

GIK ни кода, ни правильной вёрстки... зачем писать туеву хучу склассов, по одному на букву? А зачем размещать буквы на абсолютной позиции к документу? Вообщем лучше не надо так писать, вот правильный пример:

Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head>     <title>Untitled</title> <style type="text/css"> .jtext {   position: relative;   font-family: Verdana;   font-size: 16px; } .jletter {   position: absolute; } </style> </head> <body> <script type="text/javascript"> <!-- function initJText(obj) {   var t=typeof(obj.innerText)!='undefined'? obj.innerText: obj.textContent;   obj.innerHTML="";      var l=document.createElement('span');   l.appendChild(document.createTextNode(' '));   obj.appendChild(l);      for(var i=0; i<t.length; i++) {     l=document.createElement('span');     l.className='jletter';     l.innerHTML=t.charAt(i);     obj.appendChild(l);     l.style.left=l.previousSibling.offsetLeft + l.previousSibling.offsetWidth;    }      window.setInterval(function() {     randomizeText(obj);   }, 100); } function randomizeText(obj) {   for(var i=1; i<obj.childNodes.length; i++) {     obj.childNodes[i].style.top=(obj.childNodes[i].offsetWidth*0.3)*(Math.random()>0.5? 1: -1);   } } //--> </script> <div class="jtext" id="vn">Vingrad</div> <script type="text/javascript"> <!-- initJText(document.getElementById('vn')); //--> </script> </body> </html>

Цитата

GIK ни кода, ни правильной вёрстки... зачем писать туеву хучу склассов, по одному на букву?  А зачем размещать буквы на абсолютной позиции к документу? Вообщем лучше не надо так писать, вот правильный пример:

Извиняюсь что позорю участников(советников) форума, больше так делать не буду.


merfi я тут переделал немного, правдо немного опять коряво, прыгают они только после наведения мыша, но если наводить несколько раз, то это так веселит . Вобщем если что переделаешь(если конечно он тебе понравится )

Код

<html> <head>  <title>Простой JS сценарий</title>   <style type="text/css">   <!--         #layer1      { background-color: green;       left: 10px;       position: absolute;        top: 5px;       visibility: visible;             }      #layer2      { background-color: red;       left: 55px;       position: absolute;        top: 0px;        visibility: visible;       }       #layer3      { background-color: blue;       left: 95px;       position: absolute;        top: 0px;         visibility: visible;       }      #layer4     { background-color: silver;       left: 135px;       position: absolute;        top: 0px;       visibility: visible;         }     #layer5     { background-color: green;       left: 175px;       position: absolute;        top: 0px;       visibility: visible;      }         #layer6      { background-color: green;       left: 225px;       position: absolute;        top: 0px;       visibility: visible       }        #layer7      { background-color: red;       left: 275px;       position: absolute;        top: 0px;        visibility: visible;        fontSize: 10pt;     }       #layer8     { background-color: blue;       left: 310px;       position: absolute;        top: 0px;         visibility: visible;       }       #layer9     { background-color: silver;       left: 350px;       position: absolute;        top: 0px;       visibility: visible;         }          #layer10     { background-color: green;       left: 395px;       position: absolute;        top: 0px;       visibility: visible;      }    #layer11     { background-color: green;       position: absolute;       left: 445px;       top: 0px;       visibility: visible;     }      #layer12     { background-color: green;       position: absolute;       left: 495px;       top: 0px;       visibility: visible;     }      -->      </style>   <script type="text/javascript" language="JavaScript">   <!--     var n=0;   function f1()   {   if(n<1)       { document.getElementById("layer1").style.top=10;         n=1;      setTimeout("f1()", "500");        }       else {      document.getElementById("layer1").style.top=0;         document.getElementById("layer1").style.visibility="visible";        n=0;      setTimeout("f1()", "500");      } }     var k=0;     function f2()   {   if(n<1)       { document.getElementById("layer2").style.top=10;         k=1;      setTimeout("f2()", "500");        }       else {      document.getElementById("layer2").style.top=0;         document.getElementById("layer2").style.visibility="visible";        k=0;      setTimeout("f2()", "500");      } }       var t=0;     function f3()   {   if(t<1)       { document.getElementById("layer3").style.top=10;         t=1;      setTimeout("f3()", "500");        }       else {      document.getElementById("layer3").style.top=0;         document.getElementById("layer3").style.visibility="visible";        t=0;      setTimeout("f3()", "500");      }   } var u=0;     function f4()   {   if(u<1)       { document.getElementById("layer4").style.top=10;         u=1;      setTimeout("f4()", "500");        }       else {      document.getElementById("layer4").style.top=0;         document.getElementById("layer4").style.visibility="visible";        u=0;      setTimeout("f4()", "500");      }   } var w=0;     function f5()   {   if(w<1)       { document.getElementById("layer5").style.top=10;         w=1;      setTimeout("f5()", "500");        }       else {      document.getElementById("layer5").style.top=0;         document.getElementById("layer5").style.visibility="visible";        w=0;      setTimeout("f5()", "500");      }   } var q=0;     function f6()   {   if(q<1)       { document.getElementById("layer6").style.top=10;         q=1;      setTimeout("f6()", "500");        }       else {      document.getElementById("layer6").style.top=0;         document.getElementById("layer6").style.visibility="visible";        q=0;      setTimeout("f6()", "500");      }   } var z=0;     function f7()   {   if(z<1)       { document.getElementById("layer7").style.top=10;         z=1;      setTimeout("f7()", "500");        }       else {      document.getElementById("layer7").style.top=0;         document.getElementById("layer7").style.visibility="visible";        z=0;      setTimeout("f7()", "500");      }   } var x=0;     function f8()   {   if(x<1)       { document.getElementById("layer8").style.top=10;         x=1;      setTimeout("f8()", "500");        }       else {      document.getElementById("layer8").style.top=0;         document.getElementById("layer8").style.visibility="visible";        x=0;      setTimeout("f8()", "500");      }   } var c=0;     function f9()   {   if(c<1)       { document.getElementById("layer9").style.top=10;         c=1;      setTimeout("f9()", "500");        }       else {      document.getElementById("layer9").style.top=0;         document.getElementById("layer9").style.visibility="visible";        c=0;      setTimeout("f9()", "500");      }   } var v=0;     function f10()   {   if(v<1)       { document.getElementById("layer10").style.top=10;         v=1;      setTimeout("f10()", "500");        }       else {      document.getElementById("layer10").style.top=0;         document.getElementById("layer10").style.visibility="visible";        v=0;      setTimeout("f10()", "500");      }   } var b=0;     function f11()   {   if(b<1)       { document.getElementById("layer11").style.top=10;         b=1;      setTimeout("f11()", "500");        }       else {      document.getElementById("layer11").style.top=0;         document.getElementById("layer11").style.visibility="visible";        b=0;      setTimeout("f11()", "500");      }   } var m=0;     function f12()   {   if(m<1)       { document.getElementById("layer12").style.top=10;         m=1;      setTimeout("f12()", "500");        }       else {      document.getElementById("layer12").style.top=0;         document.getElementById("layer12").style.visibility="visible";        m=0;      setTimeout("f12()", "500");      }   }   //--> </script> </head>  <body>   <h1><p id="layer1" onMouseover="f1()">С</p></h1>   <h1><p id="layer2" onMouseover="f2()">Н</p></h1>   <h1><p id="layer3" onMouseover="f3()">О</p></h1>    <h1><p id="layer4" onMouseover="f4()">В</p></h1>   <h1><p id="layer5" onMouseover="f5()">Ы</p></h1>   <h1><p id="layer6" onMouseover="f6()">М</p></h1> <h1><p id="layer7" onMouseover="f7()">Г</p></h1>   <h1><p id="layer8" onMouseover="f8()">О</p></h1>   <h1><p id="layer9" onMouseover="f9()">Д</p></h1>    <h1><p id="layer10" onMouseover="f10()">О</p></h1>   <h1><p id="layer11" onMouseover="f11()">М</p></h1>   <h1><p id="layer12" onMouseover="f12()">!</p>    </h1></body> </html>

Да кстати, чуть не забыл сказать тебе спасибо merfi, после этой темы я открыл для себя много нового, и сейчас работаю над скриптом который позволяет вводить имя (слово) в текстовое поле, после чего оно вставляться в слои, в поздравительную натпись. К примеру "С новым годом имя пользователя и потом все это прыгает. Но есть большая проблема, если ты заметил в коде который я написал, по исчечении времени начинается слишком хаотичное прыгание, вот с этим я не знаю чего делать?

Цитата(GIK @ 2.11.2005, 08:44)

Извиняюсь что позорю участников(советников) форума, больше так делать не буду.

Не позоришь, просто нужно развиваться, продвигать свой уровень вперёд. Месяц назад я мог ожидать от тебя такой код, но сейчас это уже никуда не годиться.

В любой задаче(ну почти) есть всегда два условия: программист - ленивый человек; программа должна работать универсально для всех видов/размеров данных.

Глянь на свой последний код. Куча классов, различие которых в цвете и позиции. Это означает что: нельзя использовать строку отличную по длине от оригинальной и нельзя разместить её в любом месте документа. Глянем также на код, это просто продублированные функции! Если честно ты первый программист, который готов ради изменения параметров копировать тело функции... ну может ещё парни на VB так делают, но сам понимаешь это отстойно с точки зрения эффективности, размера кода и главное логики

Вёрстка тоже не выдерживает никакй критики, зачем нужно было использовать заголовки h1? Ведь это не только форматирование, это структура документа, умные читалки и навигаторы ориентируються в докуемнте по заголовкам Причина не использования естественных для этого слоёв(div) мне не ясна. Использование параграфов на одну букву тоже глупопо выше названным причинам. Помни, документ это структура и форматирование, а не одно форматирование

Смотрим на мой код выше. Изначально задаеться слой с текстом, не содержащим утомляющей разметки. Естественно если используеться градиент, то разметка нужна. Слой на релативной позиции, значит всё содержимое отсчитывает координаты от него, следовательно можно поместить этот слой куда угодно, буквы будут "бегать" за слоем.
Сразу после прочтения слоя, он забиваеться маленькой функцией span элементами на каждую букву, просто и логично. Затем запускаеться таймер что дёргает буквы.
Простейший код, полный логики, эффективный, в отличи от твоего обьёмного, но по качеству никакой.

А про создание анимаций, я думал написав статью народ врубиться, статью писал как раз из-за тебя, опешил когда увидел что ты продолжаешь писать по своему...

Спасибо Вам Господа Все работает просто заглядение Новсетаки есть минус IE говорит что есть
ActiveX и предлагает его Активировать А без активации вообще ничего работать не будет Я думаю что не каждый пользователь понимает что он творит Многие будут отказываться

Цитата(merfi @ 2.11.2005, 12:11)

Новсетаки есть минус IE говорит что есть ActiveX и предлагает его Активировать А без активации вообще ничего работать не будет

Никаких ActiveX не использованно, только JS и браузерное API. Вероятно ты запускаешь страницу с локалки(двойным кликом по страничке) и у тебя WinXP + SP2, тогда ИЕ на любые скрипты материться и предупреждает не запускать их(вместо того что бы ограничить API скрипта, вечно вместо головы ж...).

Выход: закачай страницу на любой хост, открой, если предупреждение ещё есть, то возможно у тебя троян какой как ActiveX стоит и хочет на каждой страничке работать.

Кстати А где можно почитать про браузерное API

Здесь и здесь, ну и для мозиллы XUL