[SUCHE] Animierter Text (ähnlich : aufbauender Text in HP einbinden)

Status
Für weitere Antworten geschlossen.
D

da_makkus

Well-known member
[SUCHE] Animierter Text (ähnlich : aufbauender Text in HP einbinden)

Hallo Leute,

Animierter Text
(Schrift die sich selber schreibt | Schreibmaschine)​
Vielen dank für Eure Antworten :D
lg Makkus

Lösung:

HtmlDatei:

<script>
function f(valu){
val = valu
i = 0;
inv = window.setInterval(function (){
document.getElementById('t').innerHTML = document.getElementById('t').innerHTML+((val == '\n')?'<br />':val); <-- erzeugt Absatz im Text
i++;
if(i==val.length) {window.clearInterval(inv);}
},140);// <--- Geschwindigkeit in Millisekunden
}
</script>

<body onload="f('Hallo und Herzlich Willkommen\n auf der Internetseite des ***********\n des *******\n\n Euer ********-Team');"></body>

<div id="t"></div>
</body>
Zum Vergrößern anklicken....


CSS-Datei:

#t {

}

/* In die geschweifte Klammer CSS-Angaben (zum anpassen) reinschreiben*\


Rahmen: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
Schrifteigenschaften: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
Farben: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
Zum Vergrößern anklicken....
 
Hi,
wie in dem anderen Thread fehlt mit hier das Problem. Du sagst es klappt nicht und wir sollen dir helfen. Demnach kann dir also auch mit der Antwort, "Einfach reinkopieren und es klappt." geholfen werden.
Kann ich nun den Thread schließen? => Bitte ausführlicher. Was hast du gemacht und wo hakt es?
Wobei die formatierung keine JavaScript Sache ist, sondern eher CSS

Gruß
Broken Sword
 
Dieses Script habe ich bereits in mein html document integriert:

<script>
function f(valu){
val = valu
i = 0;
inv = window.setInterval(function (){
document.getElementById('t').innerHTML = document.getElementById('t').innerHTML+val;
i++;
if(i==val.length) {window.clearInterval(inv);}
},200);//<---hier kannst du die geschwindigkeit in ms eintragen
}
</script>
<body onLoad="f('hallo und Herzlich willkommen');"><textarea id="t"></textarea></body>
Zum Vergrößern anklicken....



Frage:

1. Muss ich das
onLoad="f('hallo und Herzlich willkommen');"><textarea id="t"></textarea>"
Zum Vergrößern anklicken....
in den <body> schreiben damit es funktioniert?= Wenn ja, wie kriege ich die daraus entstehende "Box" in einen <div> an beliebiger Stelle ? (bis jetzt steht es ja nur links oben)

2. Kann ich Schriftart / Größe / Farbe / Rahmen ändern ?

Danke
 
1.
a) Ja oder in ein anderes Element, was onload unterstützt. Wie iframe, img, link.. etc. (mehr dazu hier: JavaScript onload Event)

b) Einfach anstatt dem textarea, div schreiben ;)

2.
Wie gesagt, das schaffst du mit CSS. Den Sperator hast du ja schon '#t'
Dann einfach mit css-angaben bestücken
Rahmen: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
Schrifteigenschaften: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
Farben: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Gruß
Broken Sword
 
Ach so einfach :)

Vielen Dank für die Mühe!! Jetzt hab ich es genau so wie ich es wollte !
Das einzige was nicht funktioniert ist der Absatz mit \n =?

<script>
function f(valu){
val = valu
i = 0;
inv = window.setInterval(function (){
document.getElementById('t').innerHTML = document.getElementById('t').innerHTML+val;
i++;
if(i==val.length) {window.clearInterval(inv);}
},140);//<---geschwindigkeit in ms
}
</script>

<body class="bg" onload="f('Hallo und Herzlich Willkommen\n Hallo und Herzlich Willkommen');"></body>

<div id="t"></div>
Zum Vergrößern anklicken....


Css:
#t {
position:absolute; margin-left: 360px; margin-top: 200px; z-index:5; font-size:25px; color:#0099cc; text-align:center; width: 500px; background-color:black;
}
Zum Vergrößern anklicken....
 
Da es keine Textarea mehr ist, werden einfache Zeilenumbrüche nicht mehr dargestellt. Am besten ersetzt du
Code: 
document.getElementById('t').innerHTML = document.getElementById('t').innerHTML+val[i];
mit
Code: 
document.getElementById('t').innerHTML = document.getElementById('t').innerHTML+((val[i] == '\n')?'<br />':val[i]);

Dann funktioniert das auch beim div.

Gruß
Broken Sword
 
Status
Für weitere Antworten geschlossen.

Beliebte Schlagwörter

Du verwendest einen veralteten Browser. Es ist möglich, dass diese oder andere Websites nicht korrekt angezeigt werden.
Du solltest ein Upgrade durchführen oder einen alternativen Browser verwenden.
  • cover
  • gruß
  • krombacher1
  • linkvergabe
  • microsoft
  • nicht
  • office
  • super
  • video
  • windows
    • Zurück
    Oben Unten