1337-1 メニューのアニメーション (1) animation プロパティを利用して メニューの中でアニメーションを動かしてみましょう メニューを工夫することでひときわ光る web ページにすることができます もう Flash でアニメーションを作る必要はありません JavaScript でスクリプトを書く必要もありません サンプル CSS1 メニューバーの中を動くアニメーション メニューバーの中に太陽系宇宙を入れてみました 星がまたたく宇宙空間を宇宙船スペー スシャトルと USS エンタープライズ号が飛び交う楽しいメニューバーです 1
大メニューをマウスカーソルで hover すると 半透明の小メニューが上から伸びてきます 小メニューを hover すると メニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box の div 要素を作り その中にメニューバーの背景に表示する星空用の span 要素 地球 月 土星の画像の img 要素 宇宙船スペースシャトルとUSSエンタープライズ号の画像の img 要素および ul 要素と li 要素でリストを記述します <a href="#">menu1</a> の href="#" は a 要素には必ず href 属性を指定しなければならないので 大メニューをクリックしても他へジャンプしないでページの先頭へ跳ぶように "#" と指定しています もちろんここへ # ではなく URL を記述すれば その URL へジャンプすることができます <!DOCTYPE html> <html> <head> <title>navimenuanime01</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="navimenuanime01.css"> </head> <body> <h1> メニューバーを作る (hover で小メニューを開く )</h1> <div id="menu-box"> <div id="anime-box"> <span id="stars-0"></span> <span id="stars-1"></span> <span id="stars-2"></span> <img id="earth" src="images/earth1.png" alt="earth"> <img id="moon" src="images/moon.png" alt="moon"> <img id="saturn" src="images/saturn2 53X100.png" alt="saturn"> <img id="shuttle" src="images/spaceshuttle.png" alt="shattle"> <img id="enterprise" src="images/uss-enterprise.png" alt="enterprise"> </div> 2
<ul> <li><a href="#">menu1</a> <ul> <li><a href="linkpages/page1_1.html">page1_1</a></li> <li><a href="linkpages/page1_2.html">page1_2</a></li> <li><a href="linkpages/page1_3.html">page1_3</a></li> </ul> </li> <li><a href="#">menu2</a> <ul> <li><a href="linkpages/page2_1.html">page2_1</a></li> <li><a href="linkpages/page2_2.html">page2_2</a></li> <li><a href="linkpages/page2_3.html">page2_3</a></li> <li><a href="linkpages/page2_4.html">page2_4</a></li> </ul> </li> <li><a href="#">menu3</a> <ul> <li><a href="linkpages/page3_1.html">page3_1</a></li> <li><a href="linkpages/page3_2.html">page3_2</a></li> <li><a href="linkpages/page3_3.html">page3_3</a></li> <li><a href="linkpages/page3_4.html">page3_4</a></li> <li><a href="linkpages/page3_5.html">page3_5</a></li> </ul> </li> <li><a href="#">menu4</a> <ul> <li><a href="linkpages/page4_1.html">page4_1</a></li> <li><a href="linkpages/page4_2.html">page4_2</a></li> <li><a href="linkpages/page4_3.html">page4_3</a></li> <li><a href="linkpages/page4_4.html">page4_4</a></li> </ul> </li> </ul> </div> 3
</body> </html> CSS の記述 (NaviMenuAnime01.css) 先ず id 名が #menu-box の div 要素のスタイルを指定します この本で紹介しているほかのアニメーションで使用している id 名が #stage の div 要素と同じものですが ボタンやメニューで使用していることを分かり易くするために #menu-box という id 名を付けています #menu-box { margin: 10px 0px 10px 15px; width: 765px; height: 52px; position: relative; つぎに #menu-box と同じサイズの #anime-box を指定し その背景にまたたく星 惑星の画像を表示し その中でスペースシャトル 宇宙船 USSエンタープライズ号の画像のアニメーションを動かします #anime-box は top: 0px; left: 0px; width: 765px; height: 52px; と指定し #menu-box に重ねます /* 背景アニメーション ************************************************************/ #anime-box { top: 0px; left: 0px; width: 765px; height: 52px; overflow: hidden; 背景にまたたく星のアニメーションを表示する 3 つの画像を次々と表示して 星がまたたくように見せます Stars3 50X50.png Stars4-1 50X50.png Stars4-2 50X50.png #anime-box と同じサイズの #stars-0 ボックスを指定し その background-image に 4
images/stars3 50X50.png を background-repeat: repeat; で敷きつめて表示します #stars-0 は top: 0px; left: 0px; width: 765px; height: 52px; と指定し #anime-box に重ねます #stars-0 { top: 0px; left: 0px; width: 765px; height: 52px; background-image: url("images/stars3 50X50.png"); background-repeat: repeat; background-origin: border-box; background-clip: border-box; opacity: 1.0; 次に #anime-box と同じサイズの #stars-1 ボックスを指定し その background-image に images/stars4-1 50X50.png を background-repeat: repeat; で敷きつめて表示します #stars-0 は top: 0px; left: 0px; width: 765px; height: 52px; と指定し #stars-0 ボックスに重ねます opacity: 1.0; と指定して見えるようにしておきます ボックスはアニメーション名を stars1anime 実行時間を 1s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は alternate で指定します #stars-1 { top: 0px; left: 0px; width: 765px; height: 52px; background-image: url("images/stars4-1 50X50.png"); background-repeat: repeat; background-origin: border-box; background-clip: border-box; opacity: 1.0; animation: stars1anime 1s linear 0s infinite alternate; -webkit-animation: stars1anime 1s linear 0s infinite alternate; アニメーション名 stars1anime に対応するタイムライン (@keyframes) を指定します opacity: 1.0; から opacity: 0.0; に変更して 見えないようにします @keyframes stars1anime { 0% { 100% { opacity: 0.0; 5
@-webkit-keyframes stars1anime { 0% { 100% { opacity: 0.0; 次に #anime-box と同じサイズの #stars-2 ボックスを指定し その background-image に images/stars4-2 50X50.png を background-repeat: repeat; で敷きつめて表示します #stars-0 は top: 0px; left: 0px; width: 765px; height: 52px; と指定し #stars-0 ボックスに重ねます opacity: 0.0; と指定して見えないようにしておきます ボックスはアニメーション名を stars2anime 実行時間を 1s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は alternate で指定します #stars-2 { top: 0px; left: 0px; width: 765px; height: 52px; background-image: url("images/stars4-2 50X50.png"); background-repeat: repeat; background-origin: border-box; background-clip: border-box; opacity: 0.0; animation: stars2anime 1s linear 0s infinite alternate; -webkit-animation: stars2anime 1s linear 0s infinite alternate; アニメーション名 stars2anime に対応するタイムライン (@keyframes) を指定します opacity: 0.0; から opacity: 1.0; に変更して 見えるようにします @keyframes stars1anime { 0% { 100% { opacity: 0.0; @-webkit-keyframes stars1anime { 0% { 100% { opacity: 0.0; 惑星の画像を表示する 地球の画像 (images/earth1.png) を入れる #earth ボックスを記述します position は absolute にして 位置は top -10px と left -50px(#anime-box ボックスの左上端を基準と 6
した位置 ) で指定します width: 200px; height: 200px; と指定します #earth { top: -10px; left: -50px; width: 200px; height: 200px; 月の画像 (images/moon.png) を入れる #earth ボックスを記述します position は absolute にして 位置は top 5px と left 500px(#anime-box ボックスの左上端を基準とした位置 ) で指定します width: 55px; height: 55px; と指定します #moon { top: 5px; left: 500px; width: 55px; height: 55px; 土星の画像 (images/saturn2 53X100.png) を入れる #earth ボックスを記述します position は absolute にして 位置は top 15px と left 720px(#anime-box ボックスの左上端を基準 とした位置 ) で指定します width: 30px; height: 16px; と指定します #saturn { top: 15px; left: 720px; width: 30px; height: 16px; 飛び交う宇宙船のアニメーションを表示する スペースシャトルの画像 (images/spaceshuttle.png) を入れる #shuttle ボックスを記述します position は absolute にして 位置は top 5px と left -40px(#anime-box ボックスの左上端を基準とした位置 ) で指定します width: 32px; height: 18px; と指定します ボックスはアニメーション名を shuttleanime 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #shuttle { top: 5px; left: -40px; width: 32px; height: 18px; border: none; 7
animation: shuttleanime 20s linear 0s infinite normal; -webkit-animation: shuttleanime 20s linear 0s infinite normal; アニメーション名 shuttleanime に対応するタイムライン (@keyframes) を指定します #anime-box の top: 5px; の位置から transform プロパティの treanslatex( ) 関数でX 方向へ #anime-box の右側へ飛び出すまで 810px 移動し 飛び出したら top: 5px; の位置から top: 30px; へ移し rotatez( ) 関数で時計回りに 180 度回転しスペースシャトルの画像を左右反転させます 左右反転したまま #anime-box の左側へ飛び出すまで 810px 戻します これによりスペースシャトルが宇宙空間を左右に飛び回るように見えます @keyframes shuttleanime { 0% { 49% { top: 5px; transform: translatex(810px); 51% { top: 30px; transform: translatex(810px) rotatez(180deg); 100% { top: 30px; transform: rotatez(180deg); @-webkit-keyframes shuttleanime { 0% { 49% { top: 5px; -webkit-transform: translatex(810px); 51% { top: 30px; -webkit-transform: translatex(810px) rotatez(180deg); 100% { top: 30px; -webkit-transform: rotatez(180deg); USSエンタープライズ号の画像 (images/uss-enterprise.png) を入れる #enterprise ボックスを記述します position は absolute にして 位置は top 30px と left 770px (#anime-box ボックスの左上端を基準とした位置 ) で指定します width: 32px; height: 16px; と指定します Transform プロパティの rotatez( ) 関数で時計回りに 180 度回転しス USSエンタープライズ号の画像を左右反転させておきます ボックスはアニメーション名を enterpriseanime 実行時間を 20s イージングを linear 開始待ち時間を 0s 繰り返しを infinite 実行方向は normal で指定します #enterprise { top: 30px; left: 770px; width: 32px; height: 16px; border: none; 8
transform: rotatez(180deg); -webkit-transform: rotatez(180deg); animation: enterpriseanime 20s linear 0s infinite normal; -webkit-animation: enterpriseanime 20s linear 0s infinite normal; アニメーション名 enterpriseanime に対応するタイムライン (@keyframes) を指定します #anime-box の top: 30px; の位置から transform プロパティの treanslatex( ) 関数でX 方向へ #anime-box の左側へ飛び出すまで-810px 移動し 飛び出したら top: 30px; の位置から top: 5px; へ移し rotatez( ) 関数で時計回りに 180 度回転していたUSSエンタープライズ号の画像を基へ戻すことで左右反転させます 左右反転したまま #anime-box の右側へ飛び出すまで 810px 戻します これによりUSSエンタープライズ号が宇宙空間を左右に飛び回るように見えます @keyframes enterpriseanime { 0% { 49% { top: 30px; transform: translatex(-810px) rotatez(180deg); 51% { top: 5px; transform: translatex(-810px) rotatez(0deg); 100% { top: 5px; transform: rotatez(0deg); @-webkit-keyframes enterpriseanime { 0% { 49% { top: 30px; -webkit-transform: translatex(-810px) rotatez(180deg); 51% { top: 5px; -webkit-transform: translatex(-810px) rotatez(0deg); 100% { top: 5px; -webkit-transform: rotatez(0deg); 次に大メニューの ul 要素のスタイルを指定します 大メニュー項目 3 つを入れる枠になり ます #menu-box>ul としているのは ul 要素は HTML 文書の中ではほかの場所でも記述さ れるので #menu-box の中の ul 要素に限定し しかも > を付けることにより #menu-box の子供の ul 要素 ( 大メニューの ul 要素 ) に限定してスタイルを指定するためです #menu-box の孫の ul 要素 ( 小メニューの ul 要素 ) には影響しません ul 要素は li 要素を 入れる領域として使用するので 次の指定をします 1 margin: 0px; padding: 0px; ul 要素はこの指定をしないと margin と padding の余白が自動的にとられてしまいます 2 list-style-type: none; ul 要素の下に配置される各 li 要素のテキストの先頭 に などのマークが付くのを防ぐために指定します 3border-right: 1px solid #999999; と指定しているのは li 要素 ( 大メニュー項目 ) 9
同士の間のボーダー幅を 1px にしたいため li 要素に border-right: none; の指定をしているので バーのいちばん右側のボーダー幅が 0px にならないように ul 要素の右側のボーダー幅を 1px で指定しています 4 小メニューが伸びた時に #menu-box の div 要素以降に記述されている HTML のコンテンツ ( テキストや画像等 ) が動くのを防ぐために #menu-box>ul( 大メニューの ul) を と指定し #menu-box に対する絶対位置としてあります なお 右側にコメントが付いているところがありますが 実際にスタイルシートにコードを記述する際には コメントは記述しなくてもかまいません /* 大メニュー ********************************************************************/ #menu-box>ul { /* 大メニューの ul */ margin: 0px; padding: 0px; /* この指定がないと margin と padding の余白が自動的に採られてしまう */ width: 764px; height: 52px; border-right: solid 1px #999999; list-style-type: none; /* 小メニューが伸びたときに 以降の HTML のコンテンツが動くのを防止するために必要 */ 大メニューの li 要素のスタイルを指定します #menu-box>ul>li としているのは #menu-box の子供の ul 要素 ( 大メニューの ul 要素 ) の子供の li 要素 ( 大メニュー項目 ) に限定してスタイルを指定するためです #menu-box の孫の ul 要素 ( 小メニューの ul 要素 ) の子供の li 要素 ( 小メニュー項目 ) には影響しません 大メニュー項目を横に並べたいので float: left; の指定をしています #menu-box>ul>li { width: 191px; /* 大メニューの幅 */ float: left; /* 大メニューを横に並べる */ li 要素に表示する a 要素のテキストのスタイルを指定します テキストにデコレーション ( 飾り ) が付かないように text-decoration: none; の指定をします text-decoration: none; がないと テキストにアンダーラインが付いたり リンク済みのテキストカラーに変わったりします ボーダーを border: 1px solid #999999; で指定していますが li 要素 ( 大メニュー項目 ) 同士の間のボーダー幅を 1px にしたいため li 要素に border-right: none; の指定をしています テキストの色を赤色で text-shadow プロパティでテキストの周りを白い影で囲んでいます 10
#menu-box>ul>li>a { /* 大メニューのテキスト */ text-decoration: none; border: 1px solid #999999; border-right: none; /* 大メニューの左右のボーダーを重ねる */ text-align: center; font-size: 26px; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #FF0000; text-shadow: 2px 2px 2px #FFFFFF, -2px -2px 2px #FFFFFF, 2px -2px 2px #FFFFFF, -2px 2px 2px #FFFFFF; line-height: 50px; display: block; 次に小メニューの ul 要素のスタイルを指定します 大メニュー項目を hover した時に下に伸びる小メニュー項目の枠になります margin-top: -52px; と指定しているのは 小メニューの枠を大メニュー項目に重ねておくためです 重ねておかないと大メニューの下側のはずれた部分を hover しても小メニューが伸びてしまいます opacity: 0.0; と指定して見えないようにしておきます /* 小メニュー ********************************************************************/ #menu-box ul ul { /* 小メニューの ul */ margin-top: -52px; padding: 0px; /* 小メニューを大メニューの位置に重ねる */ height: 52px; list-style-type: none; opacity: 0.0; /* 小メニューを不可視にする */ 大メニューの li 要素 ( 大メニュー項目 ) が hover された時の小メニューの ul 要素の変化 を指定します margin-top: 0px; と指定して大メニュー項目に重ねていた小メニューの枠 を大メニュー項目の下に移動し opacity: 1.0; と指定して 見えるようにします #menu-box>ul>li:hover ul { /* この変化には transition を指定せず 瞬時に変化させる */ margin-top: 0px; /* 小メニューを大メニューの下の位置に移動する */ opacity: 1.0; /* 小メニューを可視にする */ 小メニュー項目の li 要素の指定をします height: 0px; と opacity: 0.0; を指定して見え ないようにしておきます li 要素を徐々に高さが増して目に見えるように変化させるため transition の指定をします 0.5 秒で ease-in-out で変化するようにしています 11
#menu-box ul li ul li { /* 小メニューを 0.5 秒で変化するように指定 */ width: 190px; height: 0px; opacity: 0.0; transition: 0.5s ease-in-out; -webkit-transition: 0.5s ease-in-out; 大メニュー項目の li 要素が hover された時の小メニュー項目の li 要素の変化を指定しま す height: 51px; と opacity: 0.8; を指定して li 要素を徐々に高さが増して目に見え るように変化させます #menu-box>ul>li:hover ul li { height: 51px; opacity: 1.0; /* 大メニューの hover 時に小メニューの高を変え 可視にする */ li 要素に表示する a 要素のテキストのスタイルを指定します width: 100%; height: 100%; と指定することにより li の幅と高さと同じになります しかも height: 100%; の指定により li の高さが徐々に高くなるのに合わせて a 要素の高さも変化します 背景色を background-color: rgba(255, 255, 255, 0.5); で白色の半透明にしています ボーダーを border: 1px solid #999999; で指定していますが li 要素 ( 小メニュー項目 ) 同士の間の上下のボーダー幅を 1px にしたいため li 要素に border-top: none; の指定をしています overflow: hidden; と outline: none; を指定しているのは Firefox ブラウザの場合にリンク済みのデコレーションとして点線の枠取りが表示されるのを防ぐためです #menu-box ul ul li a { /* 小メニューのテキスト */ text-decoration: none; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.5); border: 1px solid #999999; border-top: none; /* 小メニューの上下のボーダーを重ねる */ text-align: center; text-overflow: clip; /* テキストの overflow 時は カットする */ font-size: 26px; font-family: "MS P ゴシック ",Osaka," ヒラギノ角ゴ Pro",Verdana; color: #000000; text-shadow: 2px 2px 2px #666666; line-height: 50px; display: block; /* Firefox の時の枠線を消す */ overflow: hidden; outline: none; 12
li 要素が hover された時の a 要素の変化を指定します 背景色を background-color: rgba(0, 0, 0, 0.5); で黒色の半透明に テキストの色を白色 #FFFFFF に変化させます #menu-box ul ul li a:hover { /* 小メニューの hover 時に背景色とテキストの色を変える */ background-color: rgba(0, 0, 0, 0.5); color: #FFFFFF; 13