Beiträge von timof

timof

Danke für die Info, explanator.
Ich hab den Code fast komplett aus dem zweiten Link von Matthias kopiert. Da steht auch gleich in der ersten Zeile: "... As of today (Dec 2003)...".
Um den HTMl und CSS Code will ich mich kümmern, wenn die Grundlegende Javascript-Funktion steht. Mehr oder weniger 'form follows function'..

timof

Danke für die schnelle Antwort!
Ich hab das jetzt mal mit dem zweiten Link soweit ganz gut hingekriegt, bin nur in JavaScript noch weniger bewandert als mit HTML.
Es hat funktioniert, das mein Text wie im Beispiel eingeblendet wird.
Jetzt ist meine nächste Frage, wie mach ich das am besten, dass nach einem Klick auf einen link auf der selben Seite ein anderer Text an der selben Stelle angezeigt wird?
Im moment hab ich einen Link drin, der nach einem Klick den selben Text nochmal anzeigt.

Am besten kopier ich den Code mal hier rein:

HTML

<html>
    <head>
        <SCRIPT LANGUAGE="JavaScript">
            <!--
            var text=" Test text Test. Bla bla.  \ Noch mehr Test Text!";        
            var delay=50;
            var currentChar=1;
            var destination="[none]";
            function type()
                {
                //if (document.all)
                    {
                    var dest=document.getElementById(destination);
                    if (dest)// && dest.innerHTML)
                        {
                        dest.innerHTML=text.substr(0, currentChar)+"_";
                        currentChar++;
                        if (currentChar>text.length)
                            {
                                currentChar=1;
                            }    
                        else
                            {
                                setTimeout("type()", delay);
                            }
                        }
                    }
                }


            function startTyping(textParam, delayParam, destinationParam)
                {
                    text=textParam;
                    delay=delayParam;
                    currentChar=1;
                    destination=destinationParam;
                    type();
                }
            //-->  
        </SCRIPT>

        <STYLE TYPE="text/css">
        <!--
        .news
        {
            font-family: "BankGothic Md BT, Helvetica";

            color=red;
            color=#CCFF66;

        }
        .weiter
        {
            margin-left: 300px;
            color: #000;
        }
        -->
        </STYLE>
        <title>JavaScript Typing Effect</title>
    </head>
    <body bgcolor="#d9d1ce" link="#FFFFFF" vlink="#FFFFFF" alink="#FFFFFF" COLOR="#FFFFFF">
        <font size="6" face="BankGothic Md BT" color="#000000">Willkommen</font>
        <font color="#000000"><DIV ID="textDestination" class="news">...</DIV></FONT>
         <div class="weiter"><a href=""  onClick="document.getElementById('textDestination')">weiter</a></div>
    </body>
<SCRIPT LANGUAGE="JavaScript">
<!--
    javascript:startTyping(text, 50, "textDestination");
//-->
</SCRIPT>


</html>

Alles anzeigen

Viele Grüße,
Timo

timof

Hallo Leute!
Ist es möglich, per HTML folgende "Animation" zu realisieren?
(ich hab ein kleines .gif erstellt, um es so gut wie möglich zu demonstieren)
http://www.imagebanana.com/view/ydbnqwqy/Unbenannt2.gif

Ich will für meine Portfolioseite sowas wie einen interaktiven Lebenslauf erstellen. Es soll also per Text eine kleine Geschichte erzählt werden. Der Text soll nach und nach mit diesem "Schreibmaschinen-Effekt" erscheinen. Die wichtigen Daten (Geburtsdatum, Ost, Schule, etc.) sollen dann aus dem Text heraus wie auf dem .gif zu sehen in eine Liste auf der linken Seite springen. Ist das mit reinem HTML (und evtl. CSS) möglich? Wenn ja, wie?
Mit meinen skills kann ich mir die Seite soweit in HTML und CSS basteln und anordnen wie ich möchte, aber bei irgendwelchen Effekten hörts dann auf.
Das hat momentan keine große Priorität , ich wills nur nicht noch weiter vor mir herschieben.

Freue mich über Antworten!

Beste Grüße,
Timo

Beiträge von timof

Kleinere Textanimationen mit HTML realisieren

Kleinere Textanimationen mit HTML realisieren

Kleinere Textanimationen mit HTML realisieren