映画や舞台で、ステージのカーテン幕が開いたり閉じたりするのをみたことあると思います。
舞台が始まる前や終わった後に、左右に開いたり閉じたりするあのカーテンです。
今回は、そのカーテンの開け閉めのアニメーションをjQueryで再現する方法です。
最初にサンプルをどうぞ。
舞台のカーテンを開けるような効果をjQueryとCSSで再現するサンプル
よくわからないというひとも、ソースをコピペしたら動作すると思います。
【作り方】
２ステップで作れてしまいます。
ステップ１. HTMLファイルを作成して、マークアップやスクリプトを記述します。今回はeffect.htmlという名前で保存します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<html> <head> <link rel="stylesheet" type="text/css" href="effect_style.css"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function open_curtain() { $("#curtain1").animate({width:20},1000); $("#curtain2").animate({width:20},1000); } function close_curtain() { $("#curtain1").animate({width:200},1000); $("#curtain2").animate({width:191},1000); } </script> </head> <body> <div id="wrapper"> <div id="effect"> <p>Surprise You Got A Lottery!</p> <img src="images/curtain1.jpg" id="curtain1"> <img src="images/curtain2.jpg" id="curtain2"> </div> <div id="curtain_buttons"> <input type="button" value="OPEN CURTAIN" onclick="open_curtain();"> <input type="button" value="CLOSE CURTAIN" onclick="close_curtain();"> </div> </div> </body> </html> |
カーテンの画像はここに置いておきます。
ステップ2. CSSファイルを作成して、スタイルを記述します。ここでは、effect_style.cssという名前で保存します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
body { text-align:center; width:100%; margin:0 auto; padding:0px; font-family:helvetica; background-color:#F79F81; } #wrapper { text-align:center; margin:0 auto; padding:0px; width:995px; } #effect { background-color:#610B0B; position:relative; width:380px; height:220px; margin-left:300px; box-shadow:0px 0px 10px 0px #610B0B; } #effect p { margin-top:10px; font-size:30px; color:#F79F81; } #curtain1 { top:0px; position:absolute; left:0px; height:220px; } #curtain2 { top:0px; position:absolute; height:220px; right:0px; } #curtain_buttons input[type="button"] { margin-top:20px; width:150px; height:45px; border-radius:2px; color:white; background-color:#B43104; border:none; border-bottom:6px solid #8A2908; } |
jQueryを読み込ませることを忘れないようにしてください。また画像ファイル、CSSファイルのパスは正しくはってください。
以上で、jQueryとCSSで作る「舞台のカーテンを開けるような効果のアニメーション」は完成です。
必要に応じて、カスタマイズしてみてくださいね。
最後にサンプルのソースを置いておきます。まぁ上のソースと同じですが・・・。どうぞご参考まで。
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>舞台のカーテンを開けるような効果をjQueryとCSSで再現するサンプル</title> <link rel="stylesheet" type="text/css" href="effect_style.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> function open_curtain() { $("#curtain1").animate({width:20},1000); $("#curtain2").animate({width:20},1000); } function close_curtain() { $("#curtain1").animate({width:200},1000); $("#curtain2").animate({width:191},1000); } </script> </head> <body> <div id="wrapper"> <div id="effect"> <br><br><br> <p>ようこそ！<br> Welcome to my site!</p> <img src="images/curtain1.jpg" id="curtain1"> <img src="images/curtain2.jpg" id="curtain2"> </div> <div id="curtain_buttons"> <input type="button" value="カーテンを開く" onclick="open_curtain();"> <input type="button" value="カーテンを閉じる" onclick="close_curtain();"> </div> </div> </body> </html> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
body { text-align:center; width:100%; margin:0 auto; padding:0px; font-family:helvetica; background-color:#F79F81; } #wrapper { text-align:center; margin:0 auto; padding:0px; width:995px; } #effect { background-color:#610B0B; position:relative; width:380px; height:220px; margin-left:300px; box-shadow:0px 0px 10px 0px #610B0B; } #effect p { margin-top:10px; font-size:30px; color:#F79F81; } #curtain1 { top:0px; position:absolute; left:0px; height:220px; } #curtain2 { top:0px; position:absolute; height:220px; right:0px; } #curtain_buttons input[type="button"] { margin-top:20px; width:150px; height:45px; border-radius:2px; color:white; background-color:#B43104; border:none; border-bottom:6px solid #8A2908; } |
参考：Curtain Opening Effect Using jQuery And CSS
あわせてお読みください
ボタンなどCSSで作った影のついたボックスにアニメーションの効果をつけれるのが、この『Shadow animation jQuery plugin』です。 この…
Nice "Flashy" menu with Jquery. jQueryでまるでFlash（フラッシュ）で作ったかのようにアニメーションする動きのあるメニ…
Overscroll jQueryプラグイン「Overscroll」は、ブラウザでiPhoneやiPadのスクロールのような動きを再現させることができます。 …
0 Comments
1 Pingback