Text in HTML blinken lassen

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 herunterladen

1
Benutze dieses nur für persönliche Zwecke. 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]XForschungsquelle}^{[2]XForschungsquelle} 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]XForschungsquelle} In dem Browser scrollt dein Text quer über die Seite, anstatt zu blinken.
2
Füge die Marquee-Tags um den blinkenden Text herum ein. Öffne dein HTML-Dokument in einem simplen Textverarbeitungsprogramm. Gib vor dem Text, der blinken soll, <marquee> ein. Gib hinter dem Text </marquee> ein.
- Richte wie immer zuerst deine HTML-Seite mit <html>, <head>, und <body> -Tags ein.
3
Stelle die Textbreite ein. Ä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
Stelle die Scrollmenge auf denselben Wert ein wie die Breite. 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
Ändere die Scrollverzögerung. Ö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]XForschungsquelle} 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
Begrenze die Anzahl des Blinkens (optional). 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 herunterladen

1
Füge ein Blinkskript in den Kopf deines HTML-Dokuments ein. Füge den folgenden JavaScript-Code zwischen das <head> und das </head> -Tag deines HTML-Dokuments ein: ^{[5]XForschungsquelle}
- function blinktext() {
    var f = document.getElementById('announcement');
    setInterval(function() {
      f.style.visibility = (f.style.visibility == 'hidden' ? '' : 'hidden');
    }, 1000);
  }
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 >.
3
Definiere deinen blinkenden Text als Bekanntgabe. 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
Passe das Skript an. 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]XForschungsquelle} Ä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]XForschungsquelle} 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]XForschungsquelle}

Werbeanzeige

Warnungen

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

Werbeanzeige