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


  • da_makkus
  • 2124 Aufrufe 7 Antworten

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • [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[i]); <-- 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>


    CSS-Datei:

    (¯`•.¸.¤ Bitte lest bevor ihr mir schreibt ¤.¸.•´¯)
    (¯`•.¸.¤ Bitte lest nochmal bevor ihr mir schreibt ¤.¸.•´¯)

    (¯`•.¸.¤ --> [SIZE="2"][COLOR="DarkOrange"]Danke[/color][/SIZE] <-- ¤.¸.•´¯)

    Dieser Beitrag wurde bereits 16 mal editiert, zuletzt von da_makkus () aus folgendem Grund: Lösung

  • 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
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

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



    Frage:

    1. Muss ich das
    onLoad="f('hallo und Herzlich willkommen');"><textarea id="t"></textarea>"
    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

    (¯`•.¸.¤ Bitte lest bevor ihr mir schreibt ¤.¸.•´¯)
    (¯`•.¸.¤ Bitte lest nochmal bevor ihr mir schreibt ¤.¸.•´¯)

    (¯`•.¸.¤ --> [SIZE="2"][COLOR="DarkOrange"]Danke[/color][/SIZE] <-- ¤.¸.•´¯)

  • 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
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

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


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

    (¯`•.¸.¤ Bitte lest bevor ihr mir schreibt ¤.¸.•´¯)
    (¯`•.¸.¤ Bitte lest nochmal bevor ihr mir schreibt ¤.¸.•´¯)

    (¯`•.¸.¤ --> [SIZE="2"][COLOR="DarkOrange"]Danke[/color][/SIZE] <-- ¤.¸.•´¯)

  • Da es keine Textarea mehr ist, werden einfache Zeilenumbrüche nicht mehr dargestellt. Am besten ersetzt du

    Quellcode

    1. document.getElementById('t').innerHTML = document.getElementById('t').innerHTML+val[i];

    mit

    Quellcode

    1. document.getElementById('t').innerHTML = document.getElementById('t').innerHTML+((val[i] == '\n')?'<br />':val[i]);


    Dann funktioniert das auch beim div.

    Gruß
    Broken Sword
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.