Texte ein- und ausblenden

Unser User Martin Bender ist sicherlich ein großer Herr-der-Ringe Fan. Er hat uns dieses Javascript eingeschickt, bei dem (von euch selbst definierte) Texte nach einander ein- und ausgeblendet werden.

Im Beispiel ist es Texte aus „Herr der Ringe“ – wer die Filme gesehen hat (oder gar das Buch gelesen hat), dem werden sie sicher bekannt vorkommen 😉

Neben den Texten könnt ihr auch die Textfarbe, die Hintergrundfarbe, die Schriftart und die Schriftgröße mit angeben. Ausserdem könnt ihr festlegen, wie lang der Zeitraum sein soll.

<!-- präsentiert von kostenlose-javascripts.de --> <script type='text/javascript'> <!-- var tindex = 0; texte = new Array(); /* HIER DIE TEXTE ANGEBEN */ texte[tindex++] = "Drei Ringe den Elbenkönigen hoch im Licht,"; texte[tindex++] = "Sieben den Zwergenherrschern in ihren Hallen aus Stein,"; texte[tindex++] = "Den Sterblichen, ewig dem Tode verfallen, neun,"; texte[tindex++] = "Einer dem Dunklen Herrn auf dunklem Thron"; texte[tindex++] = "Im Lande Mordor, wo die Schatten drohn."; texte[tindex++] = "Ein Ring, sie zu knechten, sie alle zu finden,"; texte[tindex++] = "Ins Dunkel zu treiben und ewig zu binden"; texte[tindex++] = "Im Lande Mordor, wo die Schatten drohn."; texte[tindex++] = "* * * * * * * * * * * * * * * * * * * * * * * *"; var textfarbe = "#ff0000"; // textfarbe und hintergrundfarbe var hintergrundfarbe = "#ffffff"; // nur in diesem format angeben ! var textgroesse = "32"; var textfont = "serif"; var zeit = 20; /* AB HIER NICHTS MEHR ÄNDERN */ var flag = true; var textnr = 0; var z = 0; var hexzahl = new Array("0","1","2","3","4","5","6","7","8","9","a","b","c","d","e","f"); function htod(pos1, pos2, hex) { for(x = 0; x < 16; x++) { if(hexzahl[x] == hex.substr(pos1, 1)) break; } pos1 = x * 16; for(x = 0; x < 16; x++) { if(hexzahl[x] == hex.substr(pos2, 1)) break; } return(pos1 + x); } function einausblenden() { blenden = document.getElementById("text"); if(flag) { if((z += 2) > (maxdiff - 3)) { flag = false; rfakt *= -1; gfakt *= -1; bfakt *= -1; } } else { if((z -= 2) < 3) { blenden.style.visibility = "hidden"; if((textnr++) > (tindex-2)) textnr = 0; flag = true; rfakt *= -1; gfakt *= -1; bfakt *= -1; } } hrot += rfakt * 2; hgruen += gfakt * 2; hblau += bfakt * 2; var rhih = Math.round((hrot / 16) - 0.5); var rhil = Math.round((hrot % 16) - 0.5); var ghih = Math.round((hgruen / 16) - 0.5); var ghil = Math.round((hgruen % 16) - 0.5); var bhih = Math.round((hblau / 16) - 0.5); var bhil = Math.round((hblau % 16) - 0.5); blenden.innerHTML = texte[textnr]; blenden.style.color = "#"+hexzahl[rhih]+hexzahl[rhil]+hexzahl[ghih]+hexzahl[ghil]+hexzahl[bhih]+hexzahl[bhil]; blenden.style.background = hintergrundfarbe; blenden.style.visibility = "visible"; setTimeout("einausblenden()", zeit); } textfarbe = textfarbe.toLowerCase(); hintergrundfarbe = hintergrundfarbe.toLowerCase(); var trot = htod(1 , 2, textfarbe); var tgruen = htod(3, 4, textfarbe); var tblau = htod(5, 6, textfarbe); var hrot = htod(1 , 2, hintergrundfarbe); var hgruen = htod(3, 4, hintergrundfarbe); var hblau = htod(5, 6, hintergrundfarbe); var rdiff = Math.abs(trot - hrot); var gdiff = Math.abs(tgruen - hgruen); var bdiff = Math.abs(tblau - hblau); var maxdiff = Math.max(rdiff, gdiff, bdiff); maxdiff++; var rdiff = trot - hrot; var gdiff = tgruen - hgruen; var bdiff = tblau - hblau; var rfakt = rdiff / maxdiff; var gfakt = gdiff / maxdiff; var bfakt = bdiff / maxdiff; document.write('<div id="text" style="visibility:hidden;font-family:'+textfont+';font-size:'+textgroesse+'px;color:'+hintergrundfarbe+'">-</div>'); //--> </script> <br /> JavaScript von <a href="http://www.kostenlose-javascripts.de/javascripts/texteffekte/texte-ein-und-ausblenden/" target="_blank">kostenlose-javascripts.de</a> <br /> <script type="text/javascript">einausblenden();</script> <!-- präsentiert von kostenlose-javascripts.de -->