左から、背景画像をじょじょに表示
バイト先の職業訓練学校では「実制作」なるものがありまして
訓練生さんから、質問が出た。
「背景画像の道を、左から、じょじょに表示させて、道を歩いてるような感じにしたい。」
訓練生さんのイメージするようなものが、ググってもなかったので
苦労して作ったので「めも」
↓完成したのは、こんな感じ（動かない場合はページの再読み込みをしてみて下さい）
イラストはS先生、作成のヒントはN先生にいただきました。
ありがとうございますｍ（＿ ＿）ｍ
コードは以下の通り
まずはHTML 背景画像（道）をDIVで隠しています
|
1 2 3 4 5 6 7 8 |
" title="HTML "] ＜div class="box1"＞<!-- 背景画像 上の道 --> ＜div class="box2"＞<!-- カバー -->＜/div＞ ＜/div＞<!-- /.box1 --> ＜div class="box3"＞<!-- 背景画像 下の道 --> ＜div class="box4"＞<!-- カバー -->＜/div＞ ＜/div＞<!-- /.box3 --> |
次にCSS DIVにアニメーションを付けて移動させます
|
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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
" title="書きだされたコード "] html,body,div,p { margin: 0; padding: 0; } .container{ width:900px; background-color:#CCC; margin: 0 auto; overflow: hidden; } /* 道路上 ====================================================== */ .box1 { background-image:url(img/michi2.png); background-repeat: repeat-x; background-position: left top; width: 900px; height: 100px; } /* カバー（道路上 左から表示）=================================== */ .box2 { width: 900px; height: 100px; background-color: #CCC; } .box2 { animation-name: animation01; /* アニメーション名を指定 */ animation-duration: 5s; /* アニメーション一回分の時間の長さ */ animation-timing-function: ease;/* アニメーションのタイミング・進行割合を指定する：easeが初期値 */ animation-fill-mode: both; /* アニメーション再生後は、最後のキーフレーム（100%）のスタイルが適用 */ } @keyframes animation01 { /* @keyframesで動作を定義、fromからtoへアニメーション */ from { transform: translateX(0px);/* 水平方向に移動 */ } to { transform: translateX(980px);/* 水平方向に移動 */ } } /* 道路下 ====================================================== */ .box3 { background-image:url(img/michi3.png); background-repeat: repeat-x; background-position: left top; width: 900px; height: 100px; margin-top:-10px; } /* カバー（道路上 右から表示）=================================== */ .box4 { width: 900px; height: 100px; background-color: #CCC; margin-top:0px; } .box4 { animation-name: animation02; /* アニメーション名を指定 */ animation-duration: 5s; /* アニメーション一回分の時間の長さ */ animation-timing-function: ease-out;/* アニメーションの終了付近の動きを緩やかにする */ animation-fill-mode: both; /* アニメーション再生後は、最後のキーフレーム（100%）のスタイルが適用 */ animation-delay: 4s; /* アニメーションが開始するまでの時間を指定：0sが初期値 */ } @keyframes animation02 { /* @keyframesで動作を定義、fromからtoへアニメーション */ from { transform: translateX(0);/* 水平方向に移動 */ } to { transform: translateX(-980px);/* 水平方向に移動 */ } } |
