1225-6 練習 6 Overflow The Stage(overflow) ピエロの玉乗りがステージの外から入って外へ出て行くトランジションを作ってみましょ う Hover ボタンの上をマウスポインター ( カーソル ) で hover すると ピエロの玉乗りが ステージの外から入って外へ出て行きます 動きの仕組み このトランジションは 次の3つの動きの組み合わせで動きます 1 ピエロとボールの横方向の動き left プロパティを ease-in-out で動かすことにより 最初はゆっくりと そして徐々に速度を増して動き また徐々に速度を落とし 最後はゆっくりと止まります 2 ボールの回転 transform プロパティで rotatez 関数を指定することにより 回転させます ease-in-out で動かすことにより 最初はゆっくりと そして徐々に回転速度を増して また徐々に回転速度を落とし 最後はゆっくりと止まります 3 ステージからはみ出た部分を隠す ステージに overflow プロパティで hidden を指定することにより ステージからはみ出た部分を見えなくします プロパティ overflow ボックスの内容がボックスからはみ出た部分の表示の仕方を指定します 値 説 明 visible はみ出た部分もそのまま表示される ( 初期値 ) hidden はみ出た部分は表示されない scroll はみ出た部分はスクロールで見られるようになる auto ブラウザが自動処理する ( 一般的には scroll と同じ ) 1
overflow プロパティの指定は 親ボックスのスタイルに記述します overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません ボックスの外にはみ出た部分を表示させたくないときに hidden を使用します サンプル CSS OverflowTheStage の説明 HTML の記述 (OverflowTheStage.html) id 属性 stage の div 要素 ( トランジションが動くステージ ) を作り その中にボックスや画像を記述します id 属性 button の div 要素を作ります これがボタン ( 親ボックス ) になります font1 クラスでフォントを指定し Hover を記述します id 属性 pierrot の div 要素 ( 子ボックス ) の中に <img> タグで画像要素の記述をします 画像は "images/ Pierrot.png" を指定します id 属性 ball の div 要素 ( 子ボックス ) の中に <img> タグで画像要素の記述をします 画像は "images/ ColorWheel.png" を指定します hover でトランジションが開始されるようにするので 各要素には onclick などの記述はしません <!DOCTYPE html> <html> <head> <title>overflowthestage</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="overflowthestage.css"> </head> <body> <p> ボタン ( 親ボックス ) を hover して ピエロの玉乗り ( 子ボックス ) を動かす <br> ステージの外から入って ステージの外へ出て行く </p> <div id="stage"> <div id="button"><font class="font1">hover</font> <div id="pierrot"><img src="images/pierrot.png" alt="pierrot"></div> <div id="ball"><img src="images/colorwheel.png" alt="color Wheel"></div> </div> </div> </body> </html> 2
CSS の記述 (OverflowTheStage.css) 先ず トランジションが動く #stage の記述をします そして 重要な点は overflow: hidden; と指定することです ピエロの玉乗りがステージの外へ出たときに見えないようにするために overflow プロパティを hidden( 隠す ) にするのですが overflow プロパティは position プロパティ (position: static; 以外 ) の指定がされていなと適用されません #stage { width: 600px; height: 300px; background-color: midnightblue; border: solid 1px black; position: relative; overflow: hidden; ボタンとなる #button ボックス ( 親ボックス ) を記述します position は absolute にます 角丸矩形のボタンにしたいので border-radius プロパティでボックスの 4 隅の角丸の半径 を 10px で指定します #button { top: 10px; left: 460px; width: 120px; height: 50px; border: solid 1px black; border-radius: 10px; background-color: red; text-align: center; cursor: default; 画像 (images/ Pierrot.png) を入れる #pierrot ボックス ( 子ボックス ) を記述します position は absolute にして 位置は top 60px とステージボックスの外からスタートするように left 560px(#button ボックスの左上端を基準とした位置 ) で指定します transition の記述をします left プロパティを 5 秒 ease-in-out でトランジションするように記述します #pierrot { top: 60px; left: -560px; width: 88px; height: 117px; transition: left 5s ease-in-out; -webkit-transition: left 5s ease-in-out; 3
#pierrot img { top: 0px; left: 0px; width: 100%; height: 100%; 画像 (images/ ColorWheel.png) を入れる #ball ボックス ( 子ボックス ) を記述します position は absolute にして 位置は top 172px とステージボックスの外からスタートするように left 565px(#button ボックスの左上端を基準とした位置 ) で指定します transition の記述をします left プロパティ transform プロパティを 5 秒 ease-in-out でトランジションするように記述します #ball { top: 172px; left: -565px; width: 100px; height: 100px; transition: left 5s ease-in-out, transform 5s ease-in-out; -webkit-transition: left 5s ease-in-out, -webkit-transform 5s ease-in-out; #ball img { top: 0px; left: 0px; width: 100%; height: 100%; #button ボックス ( ボタン ) を hover したら #button ボックスの背景色を green に変化させます #button ボックス ( ボタン ) を hover した時の変化として #pierrot ボックスに ステージボックスの外に出るように left プロパティで 150px(#button ボックスの左上端を基準とした位置 ) へ動かします 同じように # button ボックス ( ボタン ) を hover した時の変化として #ball ボックスに transform プロパティで rotatez(720deg) を指定し 時計回りで2 回転しながら ステージボックスの外に出るように left プロパティで 145px(#button ボックスの左上端を基準とした位置 ) へ動かします #button:hover { background-color: green; 4
#button:hover div#pierrot { left: 150px; #button:hover div#ball { left: 145px; transform: rotatez(720deg); -webkit-transform: rotatez(720deg); 最後にボタンに表示するテキストのフォントの指定をします.font1 { color: black; font: bold 28px "MS P ゴシック ", Osaka, " ヒラギノ角ゴ Pro", Verdana; line-height: 50px; 5