Java & JavaScript


Home
Applets
Scripts
   Navigation:
 · Kontextmenü
 · Linkwechsler
   Dialogboxen:
 · Alert
 · Alert 2
 · Confirm
 · Prompt
   Animation:
 · Kreis
 · Kreis 2
 · Kreis 3
 · Drei Kreise
 · Spirale
 · Planetarium
 · Globus
   Grafik-Effekte:
 · Clipping
 · Clipping 2
 · Clipping 3
 · Alpha-Clipping
 · Fading
 · Wellenmuster
 · Wellenmuster 2
   Bildschirmschoner:
 · Proto
 · Marquee
 · Donut
 · Worm
 · Mondrian
 · Pacman
   Datum & Uhrzeit:
 · Countdown
 · Countup
 · Wochentag
 · Last Modified
   Fraktale:
 · Apfelmännchen
 · Apfelmännchen 2
 · Juliamenge
 · Juliamenge 2
 · C-Wert-Generator
   Mathematik:
 · Primzahlen
 · Primzahlen 2
   Verschiedenes:
 · Dynamic Popup
 · TextArea Counter
 · Warteschleife
 · Mausschreiber
Gäste
Kontakt

- JavaScript : Grafik-Effekte : Wellenmuster -


Ein Wellenmuster mit JavaScript und dem CSS-Filter Wave.

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)




© 2001-2004 Albert Kluge - Alle Rechte vorbehalten
Impressum | Datenschutz | Nutzung | eMail