Ergebnis 1 bis 8 von 8

Thema: Kleinere Textanimationen mit HTML realisieren

  1. #1
    HTML Newbie
    Registriert seit
    31.08.2013
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Kleinere Textanimationen mit HTML realisieren

    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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Teeny
    Registriert seit
    11.08.2010
    Ort
    91217 Hersbruck
    Beiträge
    41
    Danke
    0
    Bekam 13 mal "Danke" in 13 Postings

    Standard AW: Kleinere Textanimationen mit HTML realisieren

    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-css...on-with-steps/


    ansonsten könntest du es in JavaScript realisieren:

    http://www.hashbangcode.com/blog/typ...cript-323.html

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

    LG Matthias

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    31.08.2013
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Kleinere Textanimationen mit HTML realisieren

    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-Code:
    <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>
    Viele Grüße,
    Timo

  4. #4
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Kleinere Textanimationen mit HTML realisieren

    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/...html#h-A.3.1.2 heute gilt es als ungültiges Element.

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    31.08.2013
    Beiträge
    3
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Kleinere Textanimationen mit HTML realisieren

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

  6. #6
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Kleinere Textanimationen mit HTML realisieren

    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/#val...sk_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.

  7. #7
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Kleinere Textanimationen mit HTML realisieren

    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!
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  8. #8
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Kleinere Textanimationen mit HTML realisieren

    Zitat Zitat von synaptic Beitrag anzeigen
    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
    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.

  9. Folgende User finden die Antwort von explanator gut:


Ähnliche Themen

  1. [suche] Helfer für kleinere Aufgaben
    Von CoraLLE im Forum Job Forum - Jobs für Grafiker, Programmierer und Webmaster
    Antworten: 4
    Letzter Beitrag: 13.01.2013, 18:15
  2. JS Script für Bannerwechsel - kleinere Probleme
    Von erdalprinz im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 29.12.2007, 16:58
  3. kleinere Änderungen im Forum
    Von admin im Forum Forum-Hilfe.de intern
    Antworten: 0
    Letzter Beitrag: 25.08.2006, 20:20
  4. Ideen für kleinere Kinder bis Jugendliche (ca. 16)
    Von 1987 im Forum Das Forum für Spiele, Fun & Jokes
    Antworten: 6
    Letzter Beitrag: 29.07.2005, 18:22
  5. kleinere Scollbalken!?
    Von im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 25.05.2005, 17:20

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •