Ein Wellenmuster auf einem Text mit JavaScript und dem CSS-Filter Wave erzeugen

Mit der CSS-Anweisung "filter:Wave(freq=a, light=b, phase=c, strength=d)" lässt sich ein beliebiges Objekt (Text, Bild) wellenartig verzerren. Mit einer einfachen JavaScript-Funktion wird diese Verzerrung zur Laufzeit verändert und erzeugt das bewegte Wellenmuster.

Leider werden CSS-Filter nur vom Internet Explorer verstanden.

Demo:

MOUSEOVER

Der Quelltext:

<html>
  <head>
    <script language="javascript">
      var fr=60;

      function start() {
        text.style.filter="Wave(freq="+fr+", light=0, phase=1, strength=4)

        if(fr!=85) setTimeout('fr++;start()',100);
        else fr=60;
      }
    </script>
  </head>

  <body>
    <p id="text" style="width:300;font-size:70px" onmouseover="start()">MOUSEOVER</p>
  </body>
</html>

Nur eine von schier unzähligen verschiedenartigen Bewegungsmustern.
Die Start- und Stop-Frequenzen (hier 60 und 85) korrespondieren mit der Objekthöhe (hier 70 Pixel) und sind durch Probieren schneller zu ermitteln, als wenn man lange herumrechnet.
Die width-Angabe für den Text ist zwingend, sonst funktioniert's nicht.

Der verwendete CSS-Filter Wave besitzt vier Standart-Parameter:

freq - bestimmt die Wellenfrequenz, also die Anzahl der Wellen bezüglich der Höhe des Objekts.
light - definiert die Lichtstärke. (Einfach mal ausprobieren) Werte von 0-100.
phase - bestimmt wie steil die Wellenberge sind. Die Werte 0-100 entsprechen 0°-360°.
strength - bestimmt die Intensität des Filters. Werte von 0-255 sind möglich, wenn auch nicht immer vernünftig.

Download Wellenmuster.zip (ca. 1 kb)