HTML5 Laufschrift

  • Gibt es nicht, man macht es schon ewig lange nicht mehr so. Heute löst man das mit HTML und CSS3 als Animation oder mit Hilfe von Flash. Dies ist jedoch nicht unbedingt einfach und lässt sich nicht in 5 Minuten erklären :S

  • Naja, CSS3 Animation ist im Basic ja nicht sooo komplex, da gibt es Schlimmeres :D : hier mal ein Beispiel 1 und Beispiel 2


    Die zwei wichtigen Dinge im Beispielcode sind folgende:


    Das erste definiert die "Keyframes", wobei mindestens 0% (Start) und 100% (Ende) vorhanden sein müssen.
    Mit dem Befehl animation gibt man dann zuerst den Namen der Animation an, dann die Dauer von Start bis Ende, dann wie es abgespielt werden soll (geradlinig/langsamer werdend/schneller werden/schnell-langsam-schnell/...) und durch infinite wird es eine Dauerschleife.


    Weiteführende Erklärungen (en) - Viel Spaß beim Basteln ^^

  • Und bitte die Definitionen, um das ganze mit anderen Browsern kompatibel zu machen, nicht vergessen.
    Beispiel für Chrome/Safari:




    Bei sowas mit Keyframes zu arbeiten ist etwas unsauber und das spiegelt sich auch in der
    Darstellung wieder.
    Führt man das ganze im Chrome aus, läuft der Text wie von der Tarantel gestochen schnell nach recht, ist eine lange Zeit nicht mehr zu sehen und
    taucht erst wieder nach den 10 Sekunden wieder auf. Führt man das ganze aber im Firefox auf, ist der Text schön langsam und taucht auch wieder auf, wenn dieser
    grade verschwunden ist.


    Ich empfehle dir also an der Stelle Javascript zu verwenden und diese Methode nur als Fallback,
    falls der Benutzer mal kein Javascript aktiviert hat.


    Mit freundlichen Füßen, Re3ker

  • Ich habe meine Antwort auch nur dem offensichtlich angedeuteten Wissensstand angepasst, wer heute noch nach marquee-Tags fragt wird mit keyframes/CSS3 nichts außer kopieren anfangen können und da wir ein Forum zum Lernen sind (und keines zum Codes kopieren und gehen) habe ich mir die Mühe mal gespart :)

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!