Text in HTML blinken lassen

PDF download PDF herunterladen
unter Mitarbeit von wikiHow Staff

Referenzen

PDF download PDF herunterladen

Blinkender Text war niemals Teil der Standardfunktionen von HTML, und es gibt keine Herangehensweise, die für jeden Browser geeignet ist. Die nächste Option, die nur HTML verwendet, ist das Marquee-Tag, aber selbst das funktioniert nicht bei Google Chrome. JavaScript ist eine zuverlässigere Methode, und du kannst den Code kopieren und direkt in dein HTML-Dokument einsetzen.

Methode 1
Methode 1 von 2:

Mit dem Marquee-Tag

PDF download PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/8\/80\/Make-Text-Blink-in-HTML-Step-1.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-1.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/8\/80\/Make-Text-Blink-in-HTML-Step-1.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Das Marquee-Tag ist obsolet, und Entwickler sind stark bemüht, es zu meiden. Verschiedene Browser stellen es unterschiedlich dar, und zukünftige Updates könnten den Text daran hindern, überhaupt zu blinken. [1] [2] Erlerne stattdessen die JavaScript-Herangehensweise , falls du eine professionelle Webseite erstellst.
    • Google Chrome unterstützt die “scrollamount”-Eigenschaft nicht, auf welche diese Methode angewiesen ist. [3] In dem Browser scrollt dein Text quer über die Seite, anstatt zu blinken.
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/6\/60\/Make-Text-Blink-in-HTML-Step-2-Version-3.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-2-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/6\/60\/Make-Text-Blink-in-HTML-Step-2-Version-3.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-2-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Öffne dein HTML-Dokument in einem simplen Textverarbeitungsprogramm. Gib vor dem Text, der blinken soll, <marquee> ein. Gib hinter dem Text </marquee> ein.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/7\/7d\/Make-Text-Blink-in-HTML-Step-3-Version-3.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-3-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/7\/7d\/Make-Text-Blink-in-HTML-Step-3-Version-3.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-3-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Ändere das Eröffnungs-Tag auf <marquee Breite="300" >. Das ändert nicht die Größe deiner Schrift. Es gibt zwei Gründe, warum du dieses möglicherweise zu einer anderen Zahl ändern musst:
    • Falls dein Text nicht passt, scrollt er, anstatt zu blinken. Erhöhe die Breite, um diesem vorzubeugen.
    • In Chrome scrollt der Text über eine von der Breite bestimmte Entfernung.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/91\/Make-Text-Blink-in-HTML-Step-4-Version-3.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-4-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/91\/Make-Text-Blink-in-HTML-Step-4-Version-3.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-4-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Schreibe in dasselbe Schild scrollamount="300" (oder dieselbe Zahl wie die Breite). Standardmäßig scrollt Marquee-Text quer über die Seite. Wenn du die Scrollmenge auf dieselbe Zahl einstellst wie die Breite, „scrollt“ der Text in dieselbe Position, in der er sich bereits befunden hat. Das verursacht einen Blink-Effekt.
    • Dein Text sollte jetzt so aussehen:
      <marquee width="300" scrollamount="300">Hier blinkender Text.</marquee>.
  5. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/eb\/Make-Text-Blink-in-HTML-Step-5-Version-3.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-5-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/eb\/Make-Text-Blink-in-HTML-Step-5-Version-3.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-5-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Öffne die HML-Datei in einem Webbrowser, um den Effekt zu sehen. Falls der Text zu schnell oder zu langsam blinkt, ändere die Geschwindigkeit mit der Eigenschaft scrolldelay="500" . Die Standardverzögerung ist auf 85 eingestellt. [4] Benutze für ein langsameres Blinken eine höhere Zahl, oder für ein schnelleres Blinken eine niedrigere.
    • Jetzt solltest du haben:
      <marquee width="300" scrollamount="300" scrolldelay="500">HIer blinkender Text.</marquee>
  6. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/97\/Make-Text-Blink-in-HTML-Step-6-Version-3.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-6-Version-3.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/97\/Make-Text-Blink-in-HTML-Step-6-Version-3.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-6-Version-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Viele Webnutzer finden, dass blinkender Text nervt. Um die Animation anzuhalten, wenn du die Aufmerksamkeit des Lesers erhalten hast, gib loop="7" ein. Jetzt blinkt der Text sieben Mal und verschwindet dann. (Du kannst anstelle von Sieben jede andere Zahl nehmen.)
    • Der vollständige Code:
      <marquee width="300" scrollamount="300" scrolldelay="500" loop="7">HIer blinkender Text.</marquee>
    Werbeanzeige
Methode 2
Methode 2 von 2:

Mit JavaScript

PDF download PDF herunterladen
  1. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/e\/e2\/Make-Text-Blink-in-HTML-Step-7-Version-2.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-7-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/e\/e2\/Make-Text-Blink-in-HTML-Step-7-Version-2.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-7-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Füge den folgenden JavaScript-Code zwischen das <head> und das </head> -Tag deines HTML-Dokuments ein: [5]
    • function blinktext() {
        var f = document.getElementById('announcement');
        setInterval(function() {
          f.style.visibility = (f.style.visibility == 'hidden' ? '' : 'hidden');
        }, 1000);
      }
  2. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/4\/40\/Make-Text-Blink-in-HTML-Step-8-Version-2.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-8-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/4\/40\/Make-Text-Blink-in-HTML-Step-8-Version-2.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-8-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Der obige Code hat eine Funktion definiert und sie “blinktext” genannt. Um diese Funktion in deinem HTML zu benutzen, ändere das <body>-Tag zu <body onload="blinktext();">.
  3. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/0\/0f\/Make-Text-Blink-in-HTML-Step-9-Version-2.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-9-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/0\/0f\/Make-Text-Blink-in-HTML-Step-9-Version-2.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-9-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Dieses Skript wirkt sich nur auf Element emit dem ID “Bekanntgabe” aus. Setze deinen blinkenden Text in irgendein Element und gib ihm die ID. Gib zum Beispiel <p id="announcement">Hier blinkender Text.</p> oder <div id="announcement">Hier blinkender Text.</div> ein.
    • Du kannst dieses in alles umbenennen, was du möchtest. Achte nur darauf, dass du im Skript und im Element-ID dasselbe Wort verwendest.
  4. {"smallUrl":"https:\/\/www.wikihow.com\/images_en\/thumb\/9\/99\/Make-Text-Blink-in-HTML-Step-10-Version-2.jpg\/v4-460px-Make-Text-Blink-in-HTML-Step-10-Version-2.jpg","bigUrl":"https:\/\/www.wikihow.com\/images\/thumb\/9\/99\/Make-Text-Blink-in-HTML-Step-10-Version-2.jpg\/v4-728px-Make-Text-Blink-in-HTML-Step-10-Version-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
    Die Zahl „1.000“ im Skript legt die Verzögerungen zwischen dem Blinken fest. Dieses sind Mikrosekunden, also lässt ein Wert von 1.00 den Text einmal pro Sekunde blinken. [6] Ändere diesen auf eine niedrigere Zahl, um das Blinken zu beschleunigen, oder auf eine höhere, um es zu verlangsamen.
    • Die tatsächliche Verzögerung entsprecht diesem Wert nicht vollkommen. Sie neigt dazu, etwas kürzer zu sein, kann aber länger dauern, falls dein Browser mit anderen Anfragen beschäftigt ist.
    Werbeanzeige

Tipps

  • Du kannst das Aussehen von Marquee-Text mit der Stileigenschaft anpassen. Versuche style="border:solid" hinzuzufügen.
  • Du kannst innerhalb des Marquee-Tags eine Höheneigenschaft einschließen, sowie die Breite, aber viele Browser ignorieren sie. [7] Es fällt dir möglicherweise ein Unterschied auf, falls du eine Grenze zum Marquee hinzugefügt hast.
  • Du kannst auch CSS-Animationen benutzen, um Text blinken zu lassen. Das ist ziemlich kompliziert und nicht für CSS-Anfänger zu empfehlen. Beachte bitte, dass du ein CSS-Dokument brauchst, da Firefox keine CSS-Animationen mit Inline-CSS unterstützt. [8]
Werbeanzeige

Warnungen

  • Benutze nicht das <blink>-Tag oder das Text-Dekoration-CSS-Styling, welche nur sehr wenige modern Browser unterstützen. [9] [10]
Werbeanzeige

Verwandte wikiHows

Kommentare in HTML Code einfügen
Ein Hintergrund Bild in HTML einfügen
HTM Dateien öffnen
Einen E mail Link in HTML erstellen
Eine einfache Webseite mit HTML gestalten
HTML Dateien bearbeiten
Die Farbe einer Schaltfläche in HTML ändern
Bilder mit HTML einfügen
Eine Webseite mit einfachem HTML hacken
Ein Dropdown Menü mit HTML und CSS erstellen
Text in HTML zentrieren
Einen Download Knopf auf einer Webseite erstellen
Mit HTML innerhalb von einer Seite verlinken
In HTML eine Linie einfügen
Werbeanzeige

Referenzen

  1. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee
  2. ↑ https://www.sitepoint.com/web-foundations/marquee-html-element/
  3. ↑ http://tutorial.techaltum.com/marquee.html
  4. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee
  5. ↑ http://stackoverflow.com/questions/8360130/how-to-make-a-text-flash-in-html-javascript
  6. ↑ http://javascript.info/tutorial/settimeout-setinterval
  7. ↑ https://www.sitepoint.com/web-foundations/marquee-html-element/
  8. ↑ http://caniuse.com/#feat=css-animation
  9. ↑ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blink
  1. ↑ http://caniuse.com/#feat=text-decoration

Über dieses wikiHow

In anderen Sprachen
Diese Seite wurde bisher 13.727 mal abgerufen.

War dieser Artikel hilfreich?

Werbeanzeige