Gerade in Präsentationen, Überschriften usw. kann man Texte mit einigen Effekten noch etwas mehr hervorzuheben.
Der hier gepostete Code zeigt den Text in einer Farbe ( in der Einstellung "Zeile 11") und wird von einer anderen Farbe ( in der Einstellung "Zeile 12") überlaufen. In der "Zeile 13" lässt sich die Geschwindigkeit der Farbumstellung einstellen - je höher desto langsamer.
<script> var yourtext="Willkommen in Jürgens Testforum !!!"; var messLength=yourtext.length; var initcolor="#aa0000"; var yourcolor="#0000aa"; var speed=250; var i; var j=0; document.write("<div align='center'><font face='Old English Text MT' size='12em' color='"+initcolor+"'>"); for (i=0;i<messLength;i++){ document.write("<span id='yourid"+i+"'>"+yourtext.charAt(i)+"</span>"); } document.write("</font></div>"); function colorit(){var idd="yourid"+j; if (j<messLength){ document.getElementById(idd).style.color=yourcolor;j++} else {j=0; for (i=0;i<messLength;i++){ var newidd="yourid"+i; document.getElementById(newidd).style.color=initcolor; } } } function doit(){timer=setInterval("colorit()",speed)} window.onload=doit; </script>
<style> .color-changer { color: #aa0000; font-size: 30px; font-family: 'Old English Text MT';
/* Verhalten wie DIV */ display: block; text-align: center; } .color-changer .colorized { color: #000000; }
/* Beispiel für gezielte Anpassungen */ .color-changer:nth-of-type(2) { font-style: italic; font-size: large; } </style>
<span class="color-changer">Der Treffpunkt für Hilfe, Tricks & Tipps</span> <br /> <span class="color-changer">Hier wird Ihnen geholfen …</span>
<!-- Nur wenn kein jQuery vorhanden ist --> <!-- <script src="https://code.jquery.com/jquery-latest.min.js"></script>-->
<script> $(document).ready(function(){ var speed = 150; var runOnce = true; /* false */
var colorChanger = $('.color-changer'); $.each(colorChanger, function(index, node){ var colorized = $('<span><\/span>').addClass('colorized'); var text = $(node).text(); $(node).prepend(colorized);
var letters = 0; var timer = window.setInterval(function(){ if (letters < text.length) { colorized.text(text.slice(0, ++letters)); var tempNode = $('<div></div>') .text(text.slice(letters)) .prepend(colorized) ; $(node).html(tempNode.html()); } else { if (runOnce) { window.clearInterval(timer); } else { letters = 0; $(node).text(text); } } }, speed); }); }); </script>
Der Text (momentan "Jürgens Testforum") fliegt einzeln herein, in der Style-Zeile kann man sämtliche Einstellungen zur Schrift - Hintergrund usw.tätigen.
Ich weiß jetzt könnte es nervig werden, aber dieses Script habe ich noch angehängt
Es kommt von ganz klein und wird ganz groß, wird nur einmalig angezeigt, harmoniert mit den vorigen Script sehr gut - habe es in die Fußzeile eingefügt - TOP: px bringen es hinauf.
<div id='first2'></div> <script> function fifteenth(){ sixteenth(); seventeenth(); }
window.onload=fifteenth; var eighteenth='Willkommen im Testforum'; var nineteenth=10; var twentieth=1000; function sixteenth(){ if (document.layers)document.first2.top=pageYOffset; else if (document.all){ first2.innerHTML='<div align=center>'+eighteenth+'</div>'; setTimeout('first2.style.top=document.body.scrollTop+50;first2.style.left=document.body.scrollLeft+10',100); } else if (document.getElementById){ document.getElementById('first2').innerHTML='<div align=center>'+eighteenth+'</div>'; document.getElementById('first2').style.top=pageYOffset+50; }} function seventeenth(){ if (document.layers){ document.first2.document.getElementById('<div align=center style="font-size:'+nineteenth+'px"><">'+eighteenth+'</div>'); document.first2.document.close(); } else if (document.all)first2.style.fontSize=nineteenth+'px'; else if (document.getElementById)document.getElementById('first2').style.fontSize=nineteenth+'px'; nineteenth+=5; if (nineteenth>90){ if (document.layers)setTimeout("document.first2.visibility='hide'",twentieth); else if (document.all)setTimeout("first2.style.visibility='hidden'",twentieth); else if (document.getElementById)setTimeout("document.getElementById('first2').style.visibility='hidden'",twentieth); return; }else setTimeout('seventeenth()',150); } </script>
Text-Effekte die nicht nerven! - Richtig konfigurieren! Aktualisiert 07.12.21
Hallo Jürgen, wenn man an dem Script etwas herumschraubt, kann man gute und nützliche Effekte errreichen! Das Script aus Teil 3 hat mehre Einstellmöglichkeiten und kann zur Werbung, Erinnerung, Begrüßung oder auch für Glückwunsche genutzt werden.
Funktion:
• Ein Text wird für eine bestimmte, einstellbare Zeit eingeblendet. • Die Schriftgröße wächst dabei von einem minimalen bis maximalen Wert an!
Einstellmöglichkeiten: Die folgenden Einstellungen sind so gewählt, dass die Schrift sich gleitend vergrößert. Das wird dadurch erreicht, weil der "Vergrößerungsfaktor der Schrift" sehr klein ausgewählt wurde (hier "1"). Wichtig ist auch die Standzeit des Textes. Sie ist hier auf 10 Sekunden eingestellt. Das komplette Script kann in den Header (zwischen <head> + </head>) der Webseite eingefügt werden. Oder ganz einfach, in die "Kopfzeile" des Forums. In der letzte Zeile, im "Div-Container", kann die Position und das Format des Textes beliebig bestimmt werden.
<script> function fifteenth(){ sixteenth(); seventeenth(); }
window.onload=fifteenth; var eighteenth='Willkommen im Testforum'; var nineteenth=10; var twentieth=1000; function sixteenth(){ if (document.layers)document.first2.top=pageYOffset; else if (document.all){ first2.innerHTML='<div align=center>'+eighteenth+'</div>'; setTimeout('first2.style.top=document.body.scrollTop+50;first2.style.left=document.body.scrollLeft+10',100); } else if (document.getElementById){ document.getElementById('first2').innerHTML='<div align=center>'+eighteenth+'</div>'; document.getElementById('first2').style.top=pageYOffset+50; }} function seventeenth(){ if (document.layers){ document.first2.document.getElementById('<div align=center style="font-size:'+nineteenth+'px"><">'+eighteenth+'</div>'); document.first2.document.close(); } else if (document.all)first2.style.fontSize=nineteenth+'px'; else if (document.getElementById)document.getElementById('first2').style.fontSize=nineteenth+'px'; nineteenth+=5; if (nineteenth>90){ if (document.layers)setTimeout("document.first2.visibility='hide'",twentieth); else if (document.all)setTimeout("first2.style.visibility='hidden'",twentieth); else if (document.getElementById)setTimeout("document.getElementById('first2').style.visibility='hidden'",twentieth); return; }else setTimeout('seventeenth()',150); } </script>