映画や舞台で、ステージのカーテン幕が開いたり閉じたりするのをみたことあると思います。

舞台が始まる前や終わった後に、左右に開いたり閉じたりするあのカーテンです。

今回は、そのカーテンの開け閉めのアニメーションをjQueryで再現する方法です。

最初にサンプルをどうぞ。

舞台のカーテンを開けるような効果をjQueryとCSSで再現するサンプル


よくわからないというひとも、ソースをコピペしたら動作すると思います。




【作り方】
2ステップで作れてしまいます。

ステップ1. HTMLファイルを作成して、マークアップやスクリプトを記述します。今回はeffect.htmlという名前で保存します。


カーテンの画像はここに置いておきます。
curtain1

curtain2
ステップ2. CSSファイルを作成して、スタイルを記述します。ここでは、effect_style.cssという名前で保存します。


jQueryを読み込ませることを忘れないようにしてください。また画像ファイル、CSSファイルのパスは正しくはってください。

以上で、jQueryとCSSで作る「舞台のカーテンを開けるような効果のアニメーション」は完成です。

必要に応じて、カスタマイズしてみてくださいね。

最後にサンプルのソースを置いておきます。まぁ上のソースと同じですが・・・。どうぞご参考まで。

HTML


CSS


参考:Curtain Opening Effect Using jQuery And CSS

この記事と関連してると思われる記事: