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.