Kleinere Textanimationen mit HTML realisieren

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

resteverwerter

Rein theoretisch kannst Du es mit css alleine machen, aber dann müsstest Du sicherstellen, dass alle Nutzer den neuesten (webkit)-Browser verwenden:

http://lea.verou.me/2011/09/pure-c…ion-with-steps/

ansonsten könntest du es in JavaScript realisieren:

http://www.hashbangcode.com/blog/typewriter-script-323.html

http://www.permadi.com/tutorial/jsTypewriter/

LG Matthias

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

explanator

Bevor du dich mit Javascript befasst solltest du dich erst mal mit CSS und HTML beschäftigen, da scheint es nämlich echte Defizite zu geben.
Man bemerkt das, wenn man sich deinen Code ansieht, der schon vor mehr als 10 Jahren nicht mehr auf den aktuellen Stand von HTML 4.01 war.

Das Font-Element zum Beispiel ist schon seit 1999 als veraltet gekennzeichnet: http://www.w3.org/TR/html4/appendix/changes.html#h-A.3.1.2 heute gilt es als ungültiges Element.

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

explanator

Dein Code ist, so wie er derzeit ist ungültig.
Du kannst es selbst überprüfen indem du den Code durch den Validator jagst:
http://validator.w3.org/unicorn/#valid…ask_conformance

Es macht wenig Sinn an dieser Stelle weitere Tipps zu geben, solange da Fehler drin sind, die sich unter Umständen negativ auf den weiteren Verlauf auswirken können.
Fehler sollte man schon am Anfang korrigieren, damit man sich nicht in weitere aufbauende Fehler verstrickt.

synaptic

und korrigiert mich, aber is document.all nicht nur für den IE??

des JS wird doch nicht in allen browsern laufen oder?
ich mein ich bin jetzt schon zu lang wach des noch zu testen, aber ich stimme ausnahmsweise dem explanator zu, was du hier lieferst is der shittigste shit seit langem, deine form kann keiner function followen weil beides crap is!

explanator

Zitat von synaptic

und korrigiert mich, aber is document.all nicht nur für den IE??

ja, das steht sogar schon seit Jahren so bei http://de.selfhtml.org/javascript/objekte/all.htm

Zitat

des JS wird doch nicht in allen browsern laufen oder?

Denke nicht.
Eventuell noch Chrome aber FF und sogar IE10 dürften damit nichts anfangen können. Der IE10 hat sich da sehr gut entwickelt, hin zu strickten Standards.

Kleinere Textanimationen mit HTML realisieren

Tags

Benutzer online in diesem Thema