[CSS] DXImageTransform.Microsoftによるフィルタとアニメーション

msdn『Filters and Transitions Master Sample』にあった使えそうなエフェクト処理。
スタイルシートで指定。IE 専用になってしまうが、画像だけでなく任意の要素に適用できる。
http://msdn.microsoft.com/workshop/samples/author/dhtml/DXTidemo/DXTidemo.htm

≪Effect Type: Filters≫
Pixelate(モザイク)
  FILTER: progid:DXImageTransform.Microsoft.Pixelate(maxsquare=10);
Wave(波)
  FILTER: progid:DXImageTransform.Microsoft.Wave(freq=3,LightStrength=10,Phase=10,Strength=12);
BasicImage(回転・反転など)
  FILTER: progid:DXImageTransform.Microsoft.BasicImage(Rotation=0,Mirror=0,Invert=0,XRay=0,Grayscale=0);

Wave を使えば、ラスタスクロールを高速化できそう。
あと、回転処理が90°単位なのが惜しい。ラジアン指定とかできたらいいのに。
要素のfiltersプロパティで、apply()・play()メソッドを実行することで
アニメーションができるらしい。
apply() メソッドで現状を覚えさせて、スタイル等を変更してから、
play() メソッドでアニメーションが開始する、のかな。

≪Effect Type: Transitions≫
  Pixelate(モザイク)
  GradientWipe(グラデーション付ワイパー)
  RadialWipe(回転式ワイパー)
  Slide(紙芝居)

アニメーションエフェクトについては↓に詳しく書いてありました。
http://www.fromdfj.net/javascript/filter.html#i2
このサイト素晴らしいですね!勉強になります。(2001年)

ブログ気持玉

クリックして気持ちを伝えよう!

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど(納得、参考になった、ヘー)
驚いた
面白い
ナイス
ガッツ(がんばれ!)
かわいい

気持玉数 : 1

驚いた

この記事へのコメント

この記事へのトラックバック