WHAT'S NEW? PROFILE Illustration GALLERY GIFAnimation GALLERY Banner GALLERY GIFアニメーション作りま専科! GIFがだめならJPEGを動かしちゃえ! BBS(MAIN) BBS(guestbook) BBS(PC_TROUBLE) CINEMA(映画の事) BBS(PC_TROU BLE)過去ログ 屋根裏部屋のらくがき帳(別館) LINKS トップページ
JPEG_Animation:

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秒です。

 

上のスクリプトをブラウザ上で実行したものが下の画像になります。





WHAT'S NEW? PROFILE Illustration GALLERY GIFAnimation GALLERY Banner GALLERY GIFアニメーション作りま専科! GIFがだめならJPEGを動かしちゃえ! BBS(MAIN) BBS(guestbook) BBS(PC_TROUBLE) CINEMA(映画の事) BBS(PC_TROU BLE)過去ログ 屋根裏部屋のらくがき帳(別館) LINKS トップページ