GIFアニメがだめならJPEG画像を動かしちゃえ!
Part1:JavaScriptでJPEG画像がアニメーションする!
以下のスクリプトはブラウザ上でアニメーションを実現します。
扱える画像フォーマットはGIFはもちろん、JPEG、PNGなどブラウザが
対応しているフォーマットであればおそらく全部。。。
画像をアニメーションさせるサンプルスクリプト(ファイルサイズ:約391B)
| <html> <title>Animation</title> <script language="JavaScript"> <!-- imgNum=1; function start(){ if(imgNum==1){ document.gazou.src="000.jpg"; imgNum=2; (1) } else if(imgNum==2){ document.gazou.src="001.jpg"; imgNum=1 (2) } setTimeout("start()",500); (3) } //--> </script> <body onLoad="start()"> <b><i>Animation</i></b> <br><p> <img src="000.jpg" name="gazou"> </body> </html> |
・(1)と(2)の部分の"000.jpg","001.jpg"には任意の画像ファイル名を入れてください。
・(3)の部分の"500"は画像が切り替わるまでの時間です。単位はミリ秒、1000で1秒です。
上のスクリプトをブラウザ上で実行したものが下の画像になります。