Javascript  »  Animationen  »  Blubberschrift

zur Übersicht

Kategorie	Animationen
Bezeichnung	Blubberschrift
ScriptDemo	Neues Fenster für Demo öffnen
Statistik	22997 Aufrufe davon 1x gestern
Danke an Felix. Blubberschrift-Script von felix (www.weristfelix.de Felix@antifas.de), inspiriert durch das Flash-Menü auf www.holgerkrupp.de Zusätzliche style-infos stehen im Quelltext, unter anderem kann man den Effekt mouseover-sensitiv machen.
Javascript-Quellcode  (einfach markieren, kopieren und lokal abspeichern) <style> a {text-decoration:none; } </style> <script> <!-- // Blubberschrift-Script von felix (www.weristfelix.de Felix@antifas.de) // inspiriert durch das Flash-Menü auf www.holgerkrupp.de k=-1; Buchstabe = new Array(); function erzeuge(text,url,target) // string2array { if(url!="" && target!="")document.write("<a href=\""+url+"\" target=\""+target+"\">"); if(url!="" && target=="")document.write("<a href=\""+url+"\" >"); for(var l=0;l<=text.length-1;l++) { k++; Buchstabe[k] =new Array(); zeichen=text.charAt(l); if(zeichen==" ") zeichen=" "; if(blubber==false)maus="onmouseover=\"setzen("+k+")\"";else maus=""; document.write("<span class=\"blubber\" "+maus+" id=\"x"+k+"\">"+zeichen+"</span>"); Buchstabe[k]["style"] = document.getElementById("x"+k).style; if(color) Buchstabe[k]["style"].color = Color[4] if(size) Buchstabe[k]["style"].fontSize = Size[4]+"pt"; if(bgcolor) Buchstabe[k]["style"].backgroundColor = BgColor[4]; } if(url!="")document.write("</a>"); } function init() { if(startdir)z=-3;else z=Buchstabe.length+3; if(Intro && blubber==false){z=-3; intro();} dir=startdir; if(blubber)blubb(); } function blubb() { if(z<=Buchstabe.length && dir==true)z++; if(z>=0 && dir==false)z--; setzen(Buchstabe.length-z); if(z>=Buchstabe.length-3)dir=false; if(z<=3)dir=true; setTimeout("blubb()",10); } function intro() { if(z<=Buchstabe.length) { setzen(Buchstabe.length-z); z++; setTimeout("intro()",10); } } function setzen(k) { x=0; y=Buchstabe.length-1; while(x<=y) { if(size) Buchstabe[x]["style"].fontSize = Size[4]+"pt"; if(color) Buchstabe[x]["style"].color = Color[4] if(bgcolor) Buchstabe[x]["style"].backgroundColor = BgColor[4]; x++; } k= Number(k); for(var x=-4;x<=4;x++) { y=Math.abs(x) if(Buchstabe[k-x]) { if(size) Buchstabe[k-x]["style"].fontSize = Size[y]+"pt"; if(color) Buchstabe[k-x]["style"].color = Color[y]; if(bgcolor) Buchstabe[k-x]["style"].backgroundColor = BgColor[y]; } } } /*************** hier kann man das Script editieren! *******************/ size = true; //soll die Schriftgröße dynamisch sein? color = true; //soll die Farbe dynamisch sein? bgcolor = true; //soll die Hintergrundfarbe dynamisch sein? Intro = true; //soll das Intro gezeigt werden (true,false) blubber = true; //false für mouse-over aktiv | true für hin&her-'blubbern' startdir= false; //Startrichtung für intro oder hin&her-blubbern: true für rückwärts | false für vorwärts /* ***** hier die Werte: ***** es müssen pro Array GENAU 5 Werte sein! der erste Wert beschreibt immer den wert genau unterm cursor, der letzte die standard-größe die werte dazwischen beschreiben den 'übergang' je nach links und nach rechts (man kann genausogut einen dicken Text beim mouseovern verkleinern) */ var Size = new Array(22,20,18,16,14); // Schriftgröße in 'pt' var Color = new Array("#FF0000","#AA0000","#990000","#550000","#000000"); //Vordergrundfarben var BgColor = new Array("#FFFFFF","#DDDDDD","#CCCCCC","#999999","#808080"); //Hintergrundfarben /***************** Erklärungen **************************** einen neuen BlubberText fügt man folgenderweise ein: <script> erzeuge("dein text","deine URL","dein target"); </script> das target kann auch weggelassen werden (,"") - dann bezieht sich der link aufs aktuelle Fenster für einen einfachen text bzw. keinen link einfach <script> erzeuge("dein Text","",""); </script> - die angaben ,"","" sind trotzdem wichtig! - ansonsten kommt ein link nach undefined ;-) man kann problemlos mehrere blubbertexte benutzen Soweit so gut, jetzt kann man noch ein wenig mit den styles rumspielen: zunächst würde ich den Rahmen um die Tabelle mit border=0 entfernen (nur zu demo-zwecken eingefügt) dann ist die größe der tabelle anzupassen - ansonsten gibt es vielleicht eklige effekte mit dem Textfluss (zitternder Text) dazu würde ich eine Textart mit gleicher Buchstabenlänge in allen Zeichen wählen - z.B. "lucida console" - dafür lässt sich die Klasse .blubber benutzen: <style>.blubber { font-family:"lucida console";} </style> dann <style> a {text-decoration:'none';} </style> ansonsten kommt der gewünschte Farb-Effekt nicht bei links Ich wäre euch sehr dankbar, wenn ihr meine Seite: www.weristfelix.de bei euch verlinkt ;-) Dieses Script dürft ihr frei verändern, kopieren oder was-auch-immer'n ,aber bitte erwähnt, dass das Original von mir ist ansonsten erheb ich keine copyright-ansprüche */ --> </script> <body onload="init()"> <center> <table width=400 height=100 border=1><tr><td align="center" valign=middle> <script> erzeuge("dies ist ein 'blubberschrift(link)-script' von felix","http://www.weristfelix.de","_new"); </script> </td></tr></table> </body>

Kommentare zu Blubberschrift

1 Kommentar(e) vorhanden / Anzeige der neuesten 5

am 24.04.2004 um 22:03 Uhr von XX the Agent
Das finde ich Cool! mfg XXTA... 


Alle Kommentare anzeigen   -   Kommentar hinzufügen