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>
Text-Effekte mit jQuery! / Teil 3.1 Aktualisiert 07.12.21
Hallo Jürgen, habe den letzten Text-Effekt (wachsende Schriftgröße) aus Teil 3 mit jQuery umgebaut. Das Script (Zeile 28-32) ist sehr klein geworden. Es unterscheidet sich nur in der Art, wie die Schrift größer wird!
Hier noch einige Infos:
Ist noch kein jQuery vorhanden, die Auskommentierung in Zeile 2 entfernen
Die Startgröße der Schrift in Zeile 6 bestimmen (hier 0px)
Die Endgröße der Schrift in Zeile 30 bestimmen (hier 30px mit einem "fadeIn" von 3 Sekunden / 3000)
Die Standzeit der Schrift in Zeile 30 bestimmen (hier mit einem "fadeTo" von 5 Sekunden / 5000)
Die Ausblendezeit der Schrift in Zeile 30 bestimmen (hier mit einem "fadeOut" von 2 Sekunden / 2000)
Das Script kann an beliebiger Stelle eingebaut werden!
<!-- Wird nur gebraucht, wenn kein jQuery vorhanden ist --> <!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script> -->
<!-- Ausgabe, Position des Text-Effektes --> <div id="first4">Herzlich Willkommen</div>
<!-- Das Script kann an beliebiger Stelle eingebaut werden! --> <script> $(document).ready(function(){ $("#first4").animate({fontSize: "30px"},3000).fadeTo(10000,1).fadeOut(2000); }); </script>
<!-- Wird nur gebraucht, wenn kein jQuery vorhanden ist! --> <!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script> -->
<!-- Ausgabe, Position des Text-Effektes --> <div id="first5">Herzlich Willkommen</div>
<!-- Das Script kann an beliebiger Stelle eingebaut werden! --> <script> $(document).ready(function(){ $("#first5").fadeIn(3000).fadeTo(5000,1).fadeOut(2000); }); </script>
JQuery stellt noch mehr Effekte zur Verfügung. In dem folgende Script wird eine Information langsam eingeblendet, blinkt für eine bestimmte Zeit, bleibt stehen und wird dann ausgeblendet. Wenn man die Info oder eine Überschrift nicht ausblenden will, braucht nur ".fadeOut(2000)" gelöscht werden.
Das Script (Zeile 31-35) ist ebenfalls klein und kann beliebig formatiert werden!
Auch hier noch einige Infos:
Ist noch kein jQuery vorhanden, die Auskommentierung in Zeile 2 entfernen
Beim Start ist die Schrift ausgeblendet (Zeile 3)
Die Zeit fürs langsame Einblenden wird in Zeile 30 bestimmt (hier mit einem "fadeIn" von 3 Sekunden / 3000)
Die Standzeit der Schrift wird in Zeile 33 bestimmt (hier mit einem "fadeTo" von 5 Sekunden / 5000)
Der Blinkrhythmus wird in Zeile 32 bestimmt (hier mit einem "fadeToggle" von 0,7 Sekunden / 700)
Die Blinkdauer wird in Zeile 31 bestimmt (hier mit ca. 5 Sekunden / 10/2)
Die Ausblendezeit der Schrift wird in Zeile 33 bestimmt (hier mit einem "fadeOut" von 2 Sekunden / 2000)
Das Script kann an beliebiger Stelle eingebaut werden!
Für die, die Effekte lieben, kommt noch die Slide-Funktion hinzu. In dem folgende Script wird eine Information langsam aufgefahren, bleibt stehen, verändert ihre Deckkraft und wird dann wieder zugefahren.
Das Script (Zeile 31-35) ist ebenfalls klein und kann beliebig formatiert werden!
Auch hier noch einige Infos:
Ist noch kein jQuery vorhanden, die Auskommentierung in Zeile 2 entfernen
Beim Start ist die Schrift ausgeblendet (Zeile 3)
Die Zeit fürs langsame Auffahren wird in Zeile 30 bestimmt (hier mit einem "slideDown" von 2 Sekunden / 2000)
Die Standzeit der Schrift wird in Zeile 30 bestimmt (hier mit einem "fadeTo" von 5 Sekunden / 5000)
Die Deckkraft wird in Zeile 30 bestimmt (hier mit einem Anhang von "fadeTo" mit 0,7 / 1 = volle Deckkraft)
Die Zufahrzeit der Schrift wird in Zeile 30 bestimmt (hier mit einem "slideUp" von 2 Sekunden / 2000)
Das Script kann an beliebiger Stelle eingebaut werden!
<!-- Ausgabe, Position des Text-Effektes --> <div id="first7">Herzlich Willkommen</div>
<!-- Wird nur gebraucht, wenn kein jQuery vorhanden ist! --> <!-- <script type="text/javascript" src="https://img.homepagemodules.de/ds/static/jquery/min/jquery-1.7.1.min.js"></script> --> <script> $(document).ready(function(){ $("#first7").slideDown(2000).fadeTo(5000,0.7).slideUp(3000); }); </script>