和田憲幸のブログ

札幌市白石区在住、個人事業のWebエンジニア 和田憲幸(45歳)のブログです。

透過png画像をアニメーションさせるjs

透過pngでアニメーションGIFみたいなことやりたい!ってことありますよね?

2013-03-31 22:51:02
入力時間 / 05:32

かといってアニメーションPNGはブラウザで対応してないしー。みたいなね。そんな要望に応えるために作ったのがapng.jsだ!透過pngを使ってMSIE6でも動くpngアニメーションを実現するぞ!ってなんかそういうライブラリありそうなもんだけどとりあえず作った。

詳細はapng.jsデモページを見てね。
まー有り体に言えば横に長い画像のpositionをズラしてアニメーションさせてるってだけなんですが、組み込みやすいように一応配慮しております。synck.comで公開しようと思ったのですが、ちょっとローカルでメンテ中だったので取り急ぎブログでご報告を。

さらに、アニメーションGIFには無い機能としてFlashで言うところのstopやplayのような機能が利用できます。再生開始フレームを指定してgotoAndPlayみたいなこともできますよ。setTimeoutを使っているので、少し負荷は高いかもしれませんが・・・。

VIDEOタグはコーデックの関係でイマイチ普及しないし、今さらアニメーションGIFもねー!って方はぜひ触ってみて下さい。近日、synck.comで公開予定なり!

P.1408