スクリプトでPNGアニメ Home 関連記事 過去記事

最近は、フラッシュなどを使った動きのあるWebページが多い。伝統的なGIFアニメも使われる。いずれにせよ作成ツールが必要で、手間もかかる。
たくさんの画像が既にあり、それからパラパラアニメ動画（紙芝居）を作ろうというときには、スクリプトを使うと効率がいい。簡単なスライドショーのようなこともできる。気象庁のPNG画像を使った地震記事もこの手法を使った。おまけを含めて、忘れないうちにメモっておく。

まずは、320×240画像３枚をただ並べる。

なぜか微妙な間隔が開く。

<img src="A.GIF">
<img src="B.GIF">
<img src="C.GIF">

CSSを使って２枚を重ねてみる。

外枠でposition:relativeとすることで、表示の絶対位置はブラウザ任せにする。その中でposition:absoluteで絶対値指定をする。ここの絶対値は、直近のposition指定に対するものになるので、top:0px; left:0pxで１枚目にぴったり合う。

あとから表示したものが上になるが、下に敷きたければz-indexなどで順位をつける。

B.GIFの表示サイズを圧縮しC.GIFは削除した。

<div style="position:relative;">
<img src="A.GIF">
<img src="B.GIF" style="position:absolute; top:0px; left:0px; height:100px;">
                 
</div>

CSSを使って透過させてみる。

B.GIFに対し、opacityを使って50%透過させる。opacityプロパティはIEは非対応なので、相当するfilterプロパティを使う。

<div style="position:relative;">
<img src="A.GIF">
<img src="B.GIF" style="position:absolute; top:0px; left:0px; height:100px; opacity:0.5; filter:alpha(opacity=50);">
</div>

CSSでは、縦横自在に伸び縮みさせられる。はみ出す不要部もカットできる。

B.GIFの横幅を元の倍にし、位置も調整。overflow:hiddenで、はみ出し部分をカット。ただしこれは、widthやheightでサイズを指定する必要がある。

<div style="position:relative; overflow:hidden; width:320px; height:240px;">
<img src="A.GIF">
<img src="B.GIF" style="position:absolute; top:0px; left:-160px; height:100px; width:640px; opacity:0.5; filter:alpha(opacity=50);">
</div>

JAVA Scriptを使って画像を切り替えてみる。

A.GIFとC.GIFを1000ms毎に切り替える。差し換えるA.GIFには、スクリプトから参照するための目印としてid属性を付けておく。idは唯一無二の文字列でなければならない。bloggerでは、複数記事が同時に表示される場合があるので、当稿日時を含ませるなど重複しないよう配慮する。

document.getElement……は、そのidを持つところにアクセスするもの。setTimeout関数は、function内全ての処理が終わった後に、指定秒数経過後に指定文字列を実行する。指定文字列は必ずクオーテーションで囲む。ここでは自分自身を呼び出ているので、永遠に繰り返すことになる。

<div style="position:relative; overflow:hidden; width:320px; height:240px;">
<img src="A.GIF" id="20110320_id00">
<img src="B.GIF" style="position:absolute; top:0px; left:-160px; height:100px; width:640px; opacity:0.5; filter:alpha(opacity=50);">
</div>
<script language="javascript">
<!--
function changeGif(){
 if(fn=="A"){
  fn = "C";
 } else {
  fn = "A";
 }
 document.getElementById("20110320_id00").src=fn+".GIF";
 setTimeout("changeGif()",1000);
}

fn = "X";
changeGif();
// -->
</script>

JAVA Scriptを使って文字表示を切り替えてみる。

画像ではimg要素があるので、その属性に対してアクセスを行う。文字の場合は、適当な空要素（ここではspan）を作って、そこへ処理を行う。これにもidを振っておく。

処理の流れは画像切り替えに倣う。
空要素内に文字列を埋め込むには、innerHTMLを使う。文字列表示は通常document.write()を用いるが、これは新たにページを作ってしまうので上手くない。

<span style="font-weight:bold; font-size:200%; color:pink;" id="20110320_id01"></span><br />
<br />
<script language="javascript">
<!--
function changeMes(){
 if(mes=="굿모닝 레이디と"){
  mes = "좋은 일만 생각하기は似てる。";
 } else {
  mes = "굿모닝 레이디と";
 }
 document.getElementById("20110320_id01").innerHTML=mes;
 setTimeout("changeMes()",2000);
}

mes = "소녀시대いいね！";
changeMes();
// -->
</script>

ボタンからスクリプトを実行する例。

実行するだけならidは不要。押すたびにボタンの表示内容を書き換えるため、idを振っている。表示内容変更は、素直にvalue属性へアクセスする。

<input type="button" value="スクリプト実行ボタン" onClick="_exec_script()" id="20110320_exec_script" /><br />
<br />
<script language="javascript">
<!--
function _exec_script(){
 d = new Date();
 old_time = d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
 alert("現在時刻は "+old_time);
 document.getElementById("20110320_exec_script").value = "さっきの時刻は "+old_time;
}
// -->
</script>