左から、背景画像をじょじょに表示
バイト先の職業訓練学校では「実制作」なるものがありまして
訓練生さんから、質問が出た。
「背景画像の道を、左から、じょじょに表示させて、道を歩いてるような感じにしたい。」
訓練生さんのイメージするようなものが、ググってもなかったので
苦労して作ったので「めも」
↓完成したのは、こんな感じ(動かない場合はページの再読み込みをしてみて下さい)
イラストはS先生、作成のヒントはN先生にいただきました。
ありがとうございますm(_ _)m
コードは以下の通り
まずはHTML 背景画像(道)をDIVで隠しています
<div class="box1"> <div class="box2"></div> </div> <div class="box3"> <div class="box4"></div> </div>
次にCSS DIVにアニメーションを付けて移動させます
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);/* 水平方向に移動 */ } }