DHTML - Text - Slide

Drei Animationen eines Schriftzuges (entweder zufallsgewählt oder auch eine von den drei möglichen Varianten fest einstellbar) sind mit diesem DHTML-JavaScript möglich.
Für diese Seite ist die Schrift Arial Black vorgesehen, andere Schrifttypen ergeben ein etwas anderes Ergebnis bei der hieraus resultierenden (nicht-)Überlagerung der einzelnen Zeichen ...
Eine also ggf. fehlende Überlagerung liegt nicht an einer Fehlfunktion des Scripts sondern an der im JavaScript unflexibel festgelegten Adressierung der einzelnen Buchstaben.
Der hellblaue »Hintergrundtext« dient nur der Hilfe zum Auffinden der passenden Buchstabenposition.
Zu Demonstrationszwecken wird als Ladeziel diese Seite immer wieder aufgerufen (referiert auf sich selbst) - es ist natürlich auch jede beliebige andere Seite möglich.

	Position in der html-Datei: body-Bereich
<script type="text/javascript"> <!-- /********************************************************************************** AnimationIntro * Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli<\/a> * This script was released at DHTMLCentral.com * Visit for more great scripts! * This may be used and changed freely as long as this msg is intact! * We will also appreciate any links you could give us. * * Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli<\/a> *******************************************************************************/ // Browsercheck (needed) function lib_bwcheck() { this.ver = navigator.appVersion this.agent = navigator.userAgent this.dom = document.getElementById?1:0 this.opera5 = this.agent.indexOf("Opera 5")>-1 this.ie5 = (this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0; this.ie6 = (this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0; this.ie4 = (document.all && !this.dom && !this.opera5)?1:0; this.ie = this.ie4\|\|this.ie5\|\|this.ie6 this.mac = this.agent.indexOf("Mac")>-1 this.ns6 = (this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4 = (document.layers && !this.dom)?1:0; this.bw = (this.ie6 \|\| this.ie5 \|\| this.ie4 \|\| this.ns4 \|\| this.ns6 \|\| this.opera5) return this } var bw=new lib_bwcheck() /*********************************************************************** Variables to set. Remember that if you want another font, font-size or whatever you set that in the .clDivs class in the styletag! *************************************************************************/ // Anzahl der Buchstaben der Animation numberOfLetters=17 // Die Y Position der Buchstaben relativ zur Mitte ypos=-222 / Die X Positionen der Buchstaben relativ zur Mitte. Dies ist der knifflige Teil, wenn Sie die Schriftgroesse und -typ aendern Spielen Sie etwas mit den Werten in diesem Array, da Ihre Buchstaben ansonsten nicht korrekt angezeigt werden. (beachte die testing Variable) Trick: den Text mit den entsprechenden Formatierungen (Groesse/Schrifttyp) einfuegen - bei Deckung ok / xpos=new Array() xpos[0] = -378 // f xpos[1] = -356 // r xpos[2] = -331 // e xpos[3] = -293 // e xpos[4] = -255 // - xpos[5] = -236 // s xpos[6] = -201 // o xpos[7] = -163 // l xpos[8] = -144 // u xpos[9] = -106 // t xpos[10] = -81 // i xpos[11] = -62 // o xpos[12] = -24 // n xpos[13] = 14 // s xpos[14] = 49 // . xpos[15] = 68 // d xpos[16] = 105 // e / Um die X Positionierung etwas zu vereinfachen, setzen Sie die Variable auf einen Wert von 1 Dann erfolgt keine Animation, die Buchstaben nehmen aber selbstständig den Platz ein, an welchem Sie am Ende der Animation stehen würden. / testing=0 / Es gibt drei unterschiedliche Animationen. Setzen Sie die folgende Variable auf einen Wert von 1,2 oder 3, oder setzen Sie auf 4 für zufällige Animation / animation=4 // Geschwindigkeit der Animation. aspeed=1 /***************************************************************************** Object constructor ****************************************************************************/ function makeObj(obj,speed,xmove,ymove,works) { this.el = bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?document.layers[obj]:0; this.css = bw.dom \|\| bw.ie4?this.el.style:bw.ns4?this.el:0; this.moveIt = b_moveIt; } // A unit of measure that will be added when setting the position of a layer. var px = bw.ns4\|\|window.opera?"":"px"; function b_moveIt(x,y) { this.x=x; this.y=y; this.css.left=this.x+px; this.css.top=this.y+px; } /*********************************************************************** Initiating page and starting animation *************************************************************************/ var posArray,oZdivs; function introInit(){ pageXcenter = bw.op5\|\|bw.ns4\|\|bw.ns6?innerWidth/2:document.body.offsetWidth/2 pageYcenter = bw.op5\|\|bw.ns4\|\|bw.ns6?innerHeight/2:document.body.offsetHeight/2 oZdivs = new Array() for(var i=0; i<numberOfLetters; i++){ oZdivs[i] = new makeObj('div'+i) oZdivs[i].moveIt(-200,0) oZdivs[i].css.visibility = "visible" } if (animation==4) animation = Math.round(Math.random()2)+1 if (!testing) eval('anim'+animation+'(0)') else testIt() } /************************************************************************* Intro 1 ************************************************************************/ xPath1 = new Array(-277,-271,-264,-255,-245,-234,-223,-210,-196,-181,-161,-134,-98,-52,1,53,98,131,151,156,147,124,92,59,0) yPath1 = new Array(-240,-206,-162,-114,-64,-16,29,71,112,151,187,217,241,255,260,254,239,213,179,143,108,77,51,30,0) function anim1(num,test){ if (num<oZdivs.length){ st = test?test:0; animX(num,'xPath1','yPath1',aspeed,st,'anim1('+(num+1)+','+st+')') }else endanim(0) } /*********************************************************************** Intro 2 ************************************************************************/ xPath2 = new Array(-285,-270,-255,-240,-225,-210,-195,-180,-165,-150,-135,-120,-105,-90,-75,-60,-45,-30,-15,0) yPath2 = new Array(-353,-344,-335,-324,-312,-299,-285,-270,-254,-236,-218,-198,-177,-155,-132,-108,-83,-56,-29,0) function anim2(num){ if (num<oZdivs.length){ animX(num,'xPath2','yPath2',aspeed,0,'anim2('+(num+1)+')') }else endanim(0) } /*********************************************************************** Intro 3 ************************************************************************/ xPath3 = new Array(0,-2,-6,-13,-23,-36,-50,-66,-83,-100,-117,-134,-150,-164,-177,-187,-194,-198,-200,-198,-194,-187,-177,-164,-150,-134,-117,-100,-83,-66,-50,-36,-23,-13,-6,-2,0) yPath3 = new Array(0,-17,-34,-50,-64,-77,-87,-94,-98,-100,-98,-94,-87,-77,-64,-50,-34,-17,0,17,34,50,64,77,87,94,98,100,98,94,87,77,64,50,34,17,0) function anim3(num){ if (num<oZdivs.length){ animX(num,'xPath3','yPath3',aspeed,0,'anim3('+(num+1)+')') }else endanim(0) } /*********************************************************************** Animation function ************************************************************************/ function animX(divnum,arrayX,arrayY,speed,num,fn) { arrayXr = new Array(); arrayYr = new Array() arrayXr = eval(arrayX); arrayYr = eval(arrayY) arrayX = "'"+arrayX+"'"; arrayY = "'"+arrayY+"'" if (num<arrayXr.length){ oZdivs[divnum].moveIt(arrayXr[num]+(pageXcenter+xpos[divnum]),arrayYr[num]+(pageYcenter+ypos)) num ++; setTimeout("animX("+divnum+","+arrayX+","+arrayY+","+speed+","+num+",'"+fn+"')",speed) }else eval(fn) } /*********************************************************************** This is what happens when the animation is over. If you want something else to happen edit here! ************************************************************************/ function endanim(num) { if (num<oZdivs.length){ oZdivs[num].css.visibility = "hidden" //Hiding divs num ++ setTimeout("endanim("+num+")",5) }else{ location.href=document.URL //Going to another page } } /*********************************************************************** Starting the intro when the page is loaded. **************************************************************************/ onload = introInit; //--> </script>

Quelle: DHTMLCentral.com/dhtmlcentral/thomas_brattli.asp Bitte beachten: Keine Haftung für Inhalte fremder Internetseiten .