Textfilmmern auslösen, aber wie?

Timiseistee

Guten Tag zusammen,

ich habe nun schon eine ganze Weile an vielen verschiendenen Versuchen, den Text auf meiner "Testseite" zum flimmern zu bringen, durchgeführt, komme aber zu keinem akzeptablen Ergenis.
Ziel ist es, meinen Text so schnell flimmern zu lassen, dass es die Optik eines alten Kinoprojektors (also 24x pro Sek..ungefähr) auslöst.

Kurzum: Mein Text soll so aussehen, als ob er gegen den Seitenhintergrund gestrahlt wird. (Ist alles schon erstellt, nur das Flimmern fehlt noch).

Ich wäre euch dankbar, wenn ihr mir den Code oder das Parameter dafür schreiben könntet. Einbinden schaff ich noch selber

Dodo

Was hast du denn bisher versucht?

Timiseistee

http://img821.imageshack.us/f/unbenanntdm.jpg/

Das ist die Homepage und der Text "DRIVE IN CINEMA" usw. soll flimmern.
Schon mal danke für eure Hilfe.

Timiseistee

Ich habe es mit...

- <blink>TEXT</blink>
- <script type="text/javascript">
var Ausgabe = "TEXT " + navigator.appName;
document.write(Ausgabe.blink());
</script>

...probiert und (nicht beides auf einmal), aber da blinkt es ja nur. Wenn es ein Parameter oder sowas wie einen Loop gibt, der das Ganze wesentlich schneller ablaufen lässt, wäre mir schon geholfen

Dodo

Du kannst mit Timeouts einfach die CSS-Angabe visibility ändern.

Timiseistee

Damit habe ich noch nicht wirklich gearbeitet. Mit Timeouts.
Könntest du mir den Code beschreiben?

Dodo

Noch eine kurze Zwischenfrage: Wie weit beherrscht du JavaScript?

Timiseistee

Grundlagen sind vorhanden, alles Weitere lässt sich erlernen.

Dodo

Okay, ich schreib dir schnell ein kleines Script, das die Aufgabe bewältigt

Timiseistee

Danke

Dodo

Kopier den Code in eine HTML-Datei und schau dir das Beispiel an

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>JavaScript: Blinking Boxes - by Dominik Dopplinger</title>
    <script type="text/javascript">

      function init()
      {
        start_blink("my_box0", 20, false);
	//             ^       ^    ^
	//             |       |    |----------- Show error messages ( true | false )
	//             |       |---------------- The time in milliseconds
	//             |------------------------ The ID of the HTML-Element, you want to blink


        start_blink("my_box1", 40, false);
        start_blink("my_box2", 80, false);
        start_blink("my_box3", 160, false);
        start_blink("my_box4", 320, false);
        start_blink("my_box5", 640, false);
        start_blink("my_box6", 1280, false);
      }


      function start_blink(id, time, errors)
      {
        blink_hide(id, time, errors);
      }


      function blink_hide(id, time, errors)
      {
        if(document.getElementById(id))
	{
          document.getElementById(id).style.visibility = "hidden";
          window.setTimeout("blink_show('" + id + "', " + time + ", " + errors + ");", time);
	}else if(errors)
	  window.alert("Could not find Element '" + id + "'");
      }


      function blink_show(id, time, errors)
      {
        if(document.getElementById(id))
	{
          document.getElementById(id).style.visibility = "visible";
          window.setTimeout("blink_hide('" + id + "', " + time + ", " + errors + ");", time);
	}else if(errors)
	  window.alert("Could not find Element '" + id + "'");
      }
    </script>
  </head>
  <body onload="init();">
    <h1>JavaScript: Blinking Boxes - by Dominik Dopplinger</h1>
    <p id="my_box0">Disco! ;D</p>
    <p id="my_box1">Disco! ;D</p>
    <p id="my_box2">Disco! ;D</p>
    <p id="my_box3">Disco! ;D</p>
    <p id="my_box4">Disco! ;D</p>
    <p id="my_box5">Disco! ;D</p>
    <p id="my_box6">Disco! ;D</p>
  </body>
</html>

Alles anzeigen

Tobse

Darf ich dazwischenwerfen, dass diese art extrem Rechenleistung frisst? Wenn man z.b. parallel was runterlädt oder konvertiert, kann das dann in einem Langsamen Computer enden. Ein GIF-Bildchen wäre da angebrachter.

Dodo

Zitat von Tobse

Darf ich dazwischenwerfen, dass diese art extrem Rechenleistung frisst?

Bei den heutigen Rechnern und den heutigen JavaScript-Engines ist das absolut nicht der Fall

Zitat von Tobse

Wenn man z.b. parallel was runterlädt oder konvertiert, kann das dann in einem Langsamen Computer enden.

Dabei endet aber so ziemlich jeder Effekt in Geschwindigkeitsproblemen.

Zitat von Tobse

Ein GIF-Bildchen wäre da angebrachter.

Wenn man sich mit semantischer Auszeichnung beschäftigt hat, auf keinen fall.

Grevas

HTML

function blink(id, time) {
  if( ! document.getElementById(id) ) return false;
  setTimeout(function() {
    var obj = document.getElementById(id).style;
    obj.visibility = (obj.visibility == 'visible') ? 'hidden' : 'visible';
    blink(id, time);
  }, time);
}

etwas kürzere Version

Pion

Code

function blink(a,c){if(!document.getElementById(a))return false;setInterval(function(){var b=document.getElementById(a).style;b.visibility=b.visibility=="visible"?"hidden":"visible"},c)};

Kleiner im Code, perfomanter in Ausführung;)

Timiseistee

Beide Codes funktionieren gut, die Wiederholungsanzahl habe ich noch ein wenig verändert, jetzt flimmert der Text. Danke

Den Gedanken mit dem GIF-Bild teilte ich am Anfang natürlich auch, da aber nur der Text und keine ganze Fläche flimmern sollte, brachte mir die Idee nichts.

Tags