Buchstabensuppe

Ein sehr interessanter Texteffekt, bei dem sich die Buchstaben des Alphabetes von selbst „umrühren“.

<!-- präsentiert von kostenlose-javascripts.de --> <script type='text/javascript'> <!-- var y = 200; var x = 300; var inc=0; var X = 250; var Y = 150; function moveLetters() { for ( j = 0 ; j <26 ; j++ ) { objectX="object"+j; document.getElementById('object'+j).style.top = (Y + Math.cos((20*Math.sin(inc/20))+j*70)*y*(Math.sin(10+inc/10)+0.2)*Math.cos((inc + j*25)/10))+'px'; document.getElementById('object'+j).style.left = (X + Math.sin((20*Math.sin(inc/20))+j*70)*x*(Math.sin(10+inc/10)+0.2)*Math.cos((inc + j*25)/10))+'px'; } inc+=.2; setTimeout("moveLetters()", 10); } window.onload=moveLetters; //--> </script> <div id="object0" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font color="#FF0000" size=+4>a</font></div> <div id="object1" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font color="#0FFF00" size=+4>b</font></div> <div id="object2" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font size=+4 color="#FF00FF">c</font></div> <div id="object3" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font size=+4 color="#0080FF">d</font></div> <div id="object4" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font size=+4 color="#FF8000">e</font></div> <div id="object5" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font size=+4 color="#008000">f</font></div> <div id="object6" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font size=+4 color="#8000FF">g</font></div> <div id="object7" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font color="#FF0000" size=+4>h</font></div> <div id="object8" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font color="#0FFF00" size=+4>i</font></div> <div id="object9" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font size=+4 color="#FF00FF">j</font></div> <div id="object10" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font size=+4 color="#0080FF">k</font></div> <div id="object11" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font size=+4 color="#FF8000">l</font></div> <div id="object12" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font size=+4 color="#008000">m</font></div> <div id="object13" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font size=+4 color="#8000FF">n</font></div> <div id="object14" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font color="#FF0000" size=+4>o</font></div> <div id="object15" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font color="#0FFF00" size=+4>p</font></div> <div id="object16" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font size=+4 color="#FF00FF">q</font></div> <div id="object17" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font size=+4 color="#0080FF">r</font></div> <div id="object18" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font size=+4 color="#FF8000">s</font></div> <div id="object19" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font size=+4 color="#008000">t</font></div> <div id="object20" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font size=+4 color="#8000FF">u</font></div> <div id="object21" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font color="#FF0000" size=+4>v</font></div> <div id="object22" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font color="#0FFF00" size=+4>w</font></div> <div id="object23" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font size=+4 color="#FF00FF">x</font></div> <div id="object24" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font size=+4 color="#0080FF">y</font></div> <div id="object25" style="position:absolute; visibility:show; left:250px; top:150px; z-index:2"> <font size=+4 color="#FF8000">z</font></div> <!-- präsentiert von kostenlose-javascripts.de -->