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 : Alpha-Clipping -


Ein Bild mit dem CSS Alpha-Filter in Polygone (Drei-, Vier- und Fünfecke) zerlegen und mit JavaScript animieren.

Der CSS Alpha-Filter ist eigentlich für Verschmelzungs- und Einblend-Effekte gedacht. Doch durch geschickte Wahl der Werte, lässt sich ein Bild entlang einer (fast) beliebigen Schnittlinie relativ sauber durchtrennen. (Die nicht zu vermeidene minimale Verschmelzung bei nicht senk- oder waagerechten Schnitten ist sogar, als eher nützliches Anti-Aliasing zu betrachten.) Zusammen mit JavaScript, lassen sich nun ungewöhnliche Effekte verwirklichen.

Leider werden CSS-Filter nur vom Internet Explorer verstanden.


Demo:

Oder starten Sie den Random-Mode und beobachten die ganze Vielfalt dieses Features :-)

In der Statuszeile können Sie überings die Alpha-Filter-Werte für das jeweils aktuelle Polygon ablesen.


Der Quelltext:

<html>

  <head>
    <title>Alpha-Filter Clipping</title>

    <script language="JavaScript">
      // Die Anfangssequenz
      var s1=1, s2=98, s3=0, s4=99; // Startwerte (in Prozent !)
      function polygon() {
        image.style.filter=
            "Alpha(style=1, startx="+s1+", starty="+s2+", finishx="+s3+", finishy="+s4+")";
        if(s1<50) setTimeout('s1++,s2--,s3++,s4--;polygon()',40);
        else polygon1();
      }

      // Die vier Polygone

      // Startwerte für die ersten vier
      var a1=50, a2=49, a3=49, a4=50;
      var b1=50, b2=49, b3=49, b4=51;
      var c1=50, c2=49, c3=50, c4=50;
      var d1=50, d2=49, d3=51, d4=51;

      // Dreieck
      function polygon1() {
        image.style.filter=
            "Alpha(style=1, startx="+a1+", starty="+a2+", finishx="+a3+", finishy="+a4+")";
        setTimeout('polygon2()',1000);
      }

      // Viereck
      function polygon2() {
        image.style.filter=
            "Alpha(style=1, startx="+b1+", starty="+b2+", finishx="+b3+", finishy="+b4+")";
        setTimeout('polygon3()',1000);
      }

      // Rechteck
      function polygon3() {
        image.style.filter=
            "Alpha(style=1, startx="+c1+", starty="+c2+", finishx="+c3+", finishy="+c4+")";
        setTimeout('polygon4()',1000);
      }

      // Viereck
      function polygon4() {
        image.style.filter=
            "Alpha(style=1, startx="+d1+", starty="+d2+", finishx="+d3+", finishy="+d4+")";
        change();
      setTimeout('polygon1()',1000);
      }

      // die vier Polygone nach jedem Zyklus um 90° drehen
      function change() {
        x=a1, a1=a2, a2=a3, a3=a4, a4=x;
        x=b1, b1=b2, b2=b3, b3=b4, b4=x;
        x=c1, c1=c2, c2=c3, c3=c4, c4=x;
        x=d1, d1=d2, d2=d3, d3=d4, d4=x;
      }
    </script>
  </head>

  <body onload="setTimeout('polygon()',3000)">
     <p id="image" style="position:absolute;left:10;top:10;width:200)">
        <img src="sonne.gif" width="200" height="200"> </p>
  </body>

</html>


Zur weiteren Erklärung:

Der jeweilige Schnitt verläuft genau rechtwinklig zu der Geraden, die die beiden Verbindungspunkte (startx/starty , finishx/finishy) bilden und durch deren Mittelpunkt. Es wird immer diejenige Seite angezeigt, in der der Startpunkt liegt. Sind die Punkte z.B. (50,49) und (49,50), die eine Gerade von rechts-oben nach links-unten bilden, verläuft die Schnittlinie von links-oben nach rechts-unten. Angezeigt wird dann der rechte obere Teil.
Beachten Sie außerdem: Die Punktwerte sind keine Pixel-Angaben, sondern Prozentwerte, die sich auf die Bildmaße beziehen. Und je größer der Abstand der beiden Punkte, desto deutlicher tritt der Alpha-Filter Verschmelzungs-Effekt wieder hervor.


Download  Alpha_Clipping.zip (mit Bild ca. 12 kb)




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