大メニューをマウスカーソルで hover すると半透明の小メニューが上から伸びてきます小メニューを hover するとメニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box

Size: px

Start display at page:

Download "大メニューをマウスカーソルで hover すると半透明の小メニューが上から伸びてきます小メニューを hover するとメニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box"

みひなみつだ
5 years ago
Views:

1337-1 メニューのアニメーション (1) animation プロパティを利用して

1 メニューのアニメーション (1) animation プロパティを利用してメニューの中でアニメーションを動かしてみましょうメニューを工夫することでひときわ光る web ページにすることができますもう Flash でアニメーションを作る必要はありません JavaScript でスクリプトを書く必要もありませんサンプル CSS1 メニューバーの中を動くアニメーションメニューバーの中に太陽系宇宙を入れてみました星がまたたく宇宙空間を宇宙船スペースシャトルと USS エンタープライズ号が飛び交う楽しいメニューバーです 1

2 大メニューをマウスカーソルで 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

3 <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

4 </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

5 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; に変更して stars1anime { 0% { 100% { opacity: 0.0; 5

6 @-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; に変更して stars1anime { 0% { 100% { opacity: stars1anime { 0% { 100% { opacity: 0.0; 惑星の画像を表示する地球の画像 (images/earth1.png) を入れる #earth ボックスを記述します position は absolute にして位置は top -10px と left -50px(#anime-box ボックスの左上端を基準と 6

7 した位置 ) で指定します 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

8 animation: shuttleanime 20s linear 0s infinite normal; -webkit-animation: shuttleanime 20s linear 0s infinite normal; アニメーション名 shuttleanime に対応するタイムラインを指定します #anime-box の top: 5px; の位置から transform プロパティの treanslatex( ) 関数でX 方向へ #anime-box の右側へ飛び出すまで 810px 移動し飛び出したら top: 5px; の位置から top: 30px; へ移し rotatez( ) 関数で時計回りに 180 度回転しスペースシャトルの画像を左右反転させます左右反転したまま #anime-box の左側へ飛び出すまで 810px 戻します shuttleanime { 0% { 49% { top: 5px; transform: translatex(810px); 51% { top: 30px; transform: translatex(810px) rotatez(180deg); 100% { top: 30px; transform: 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

9 transform: rotatez(180deg); -webkit-transform: rotatez(180deg); animation: enterpriseanime 20s linear 0s infinite normal; -webkit-animation: enterpriseanime 20s linear 0s infinite normal; アニメーション名 enterpriseanime に対応するタイムラインを指定します #anime-box の top: 30px; の位置から transform プロパティの treanslatex( ) 関数でX 方向へ #anime-box の左側へ飛び出すまで-810px 移動し飛び出したら top: 30px; の位置から top: 5px; へ移し rotatez( ) 関数で時計回りに 180 度回転していたUSSエンタープライズ号の画像を基へ戻すことで左右反転させます左右反転したまま #anime-box の右側へ飛び出すまで 810px 戻します enterpriseanime { 0% { 49% { top: 30px; transform: translatex(-810px) rotatez(180deg); 51% { top: 5px; transform: translatex(-810px) rotatez(0deg); 100% { top: 5px; transform: 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

10 同士の間のボーダー幅を 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

11 #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

12 #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

13 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

メニューのトランジション 1 (text-overflow) トランジションを利用して面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょうここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません J

1253-1 メニューのトランジション 1 (text-overflow) トランジションを利用して面白い個性的なメニューを作ってみましょう web ページもぐっと引き立つでしょうここで紹介するメニューも Illustrator や Photoshop でメニューの画像を作る必要はありません JavaScript でスクリプトを書く必要もありませんすべて CSS3 の機能だけで作成されています

大メニューをマウスカーソルで hover すると 半透明の小メニューが上から伸びてきます 小メニューを hover すると メニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box

大メニューをマウスカーソルで hover すると半透明の小メニューが上から伸びてきます小メニューを hover するとメニューの背景色とテキストの色が変わります NaviMenuAnime01 の説明 HTML の記述 (NaviMenuAnime01.html) id 属性 menu-box