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

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

今回は、そのカーテンの開け閉めのアニメーションを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

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

    None Found