javascriptを使った演出01 - WebデザインノートBOOK

ふと思いついたイメージを演出したくて、いろんなjavascriptを探してみました。それを改造しておもしろいライブラリを作ってみたいと思います。

画像をゆっくり表示

ザ・演出。
趣味での演出以外は必要なさそうな...そんなScriptです。

htmlソースのbodyタグで初期読み込みを行う。

<body onLoad="showDsp()">

メイン部分

<div>
  <img src="img01.jpg" />

  <div id="curtain"><img src="black.jpg" /></div>
</div>

1. エフェクトをかけたい外枠のdivは「position:relative;」指定する。
2. その中に同じサイズの画像を
  position:relative;
  z-index:1
  top:0;
  left:0;で配置。

1. div id="curtain"の部分も
  position:relative;
  z-index:2
  top:0;
  left:0;で配置。
  こちらの中には同じサイズの真っ黒な画像が入っています。

次に下記jsファイルを読み込む

slowDsp.js(すみません勝手に命名しましたｗ)

var yy=300;

function slowDsp(){
  if(yy>0){
    yy=yy-1;
    document.getElementById('curtain').style.top=300-yy;
    document.getElementById('curtain').style.height=yy;
    setTimeout('slowDsp()',20);
  }
}

【解説】
↓１行目から。画像を隠すための真っ黒画像の高さを記入。
(画像サイズは300*300)

slowDsp関数へ入って、
↓隠す画像サイズの高さが「0」以上の場合
↓その画像の高さを「1」小さくする
↓positionのtop指定に「1」を足す（表示上下に1pxズレる）
↓表示上の画像サイズを「1px」小さくする

※最後の部分。自分と同じ関数をもう一度呼び出しています。
　ループと同じような処理になります。
　こういった処理をおこなう関数を「再帰関数」と呼びます。

※「setTimeout('slowDsp()',20);」の20の部分は、20ミリ秒後に左の処理を行うという指定。

※画像サイズと書いてますが、本当は画像が置かれているdivのサイズを変換しています。

【サンプル】

※ちなみに表示の仕方を変えることも可能。
例えば下から表示していく場合。
「document.getElementById('curtain').style.top=300-yy;」の1行を削除します。

おまけ改造

【斜めバージョン】

う〜んくだらないｗ
これだけだとつまらないですね。

いずれここに追加で別の演出を書き加えたいと思います。