| 【JavaScript/DHTMLのポイント】 |
|
めくり絵
- 表示中の絵を四隅からめくろうとしたときに、めくったところには次の絵が、めくった部分には紙の裏の色が出て前の絵が透けて見えるようするため、
後から次に表示する絵、今表示している絵、裏に透けて見える今の絵、紙の裏のレイヤを重ね、順次移動とクリップをして表示する。
前面の絵は2枚を重ねてめくられた部分以外を表示する。また透けて見える絵は３枚を重ねて斜めにカットされた裏面の絵を表示する。
- ロード時にブラウザの種類の判定後、IniSet()関数が画面サイズの取得をした後、レイヤ名を設定し、
前面にある表示中の絵、後面にある次に表示する絵のレイヤを移動し、表示中の画像を1番の画像に選択し、次に表示する画像も乱数で選択する。
さらに乱数を使って四隅のどの隅からめくるかを選び、その向きに応じた透けて見える絵も選択する。
その後Stateを０にしてタイマを使って１秒後にTurn()関数を呼び出す。
- Turn()関数は呼ばれるとまず画面サイズが変わっていないか調べ、変わっているときはReload()する。
変わっていなければStateにStepを加え次の位置の表示を行う。Stateが290以下の時はめくった部分がまだ３角形にみえるので、
めくった部分の厚みを表す湾曲部分を両端に表示する。このため湾曲部、紙の裏面、透けて見える部分の絵のレイヤを移動すると同時にクリップする。
- Stateが290より大きく、390以下の時はめくった面の一方は今表示中の絵を完全に覆ってしまうのでこちら側の湾曲部の絵は表示しない。
表示する湾曲部、紙の裏面、透けて見える部分の絵のレイヤを移動すると同時にクリップする。
- Stateが390より大きく700以下の時はめくった部分が表示中の絵を完全に覆っているので湾曲部は表示しないで、紙の裏面、透けて見える部分の絵のレイヤを移動すると同時にクリップする。
Stateが700以下の時には50ｍｓ後にTurn()関数を呼び出す。
- Stateが700を超えたら透けて見える画像のレイヤ、紙の裏のレイヤを非表示にした上、後面にあった画像を前面にも表示し、
前面のクリップをはずして全面表示する。その後NextD()関数を呼びだし次のめくる位置を四隅のどれにするかを選択し、
その向きに応じて紙の裏面に透けて見える絵を選択する。
その後NextP()関数を呼び乱数を使って前の画像と異なる次の画像を選択し、後面のレイヤに貼り付け、１秒後にTurn()関数を呼び出す。
- ４つのめくる位置を決めるボタンを押すと次にNextD()関数が呼ばれた時にこの方向になるよう、next()関数を読んでnDに覚えておく。
Java Script事例集トップページへ
鴈野さんちのHomePage TOPへ
ご感想などは鴈野 敏生 まで。
