Forum - Text-Effekte / Teil 1-4

<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>
 

<style>
#first2{
position:absolute;
color:red;
z-index:99999;
top:100px;
left:20%;
font-family:arial black;
}
</style>
 
<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>
 

<style>
#first6 {
display:none; /* Start - Schrift ist ausgeblendet */
font-size:30px;
position:absolute;
color:#0000aa;
z-index:9999;
top:200px;
border:8px double #bbbbbb;
border-radius:9px; 
background-color: #3333aa;
padding:10px;
width:400px; /* auto; */
height:40px; /* auto; */
left:50%;
margin-left:-200px;
color:#ffffff;
font-family:Old English Text MT;
text-align:center;
}
</style>
 
<!-- Ausgabe, Position des Text-Effektes -->
<div id="first6">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() { 
  $("#first6").fadeIn(3000);
  for(i = 0; i < 10; i++)
  $("#first6").fadeToggle(700);
  $("#first6").fadeTo(5000,1).fadeOut(2000);  
} );
</script>
 

<style>
#first7 {
display:none; /* Start - Schrift ist ausgeblendet */
font-size:30px;
position:absolute;
color:#0000aa;
z-index:9999;
top:200px;
border:8px double #bbbbbb;
border-radius:9px; 
background-color: #3333aa;
padding:10px;
width:400px; /* auto; */
height:40px; /* auto; */
left:50%;
margin-left:-200px;
color:#ffffff;
font-family:Old English Text MT;
text-align:center;
}
</style>
 
<!-- 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>