どうも！LSSです！！
一昨日の記事、
にコメントいただき、ありがとうございました^^
「上下もいけるんですよね？」とのコメントを複数いただきましたので、今回は上下移動を含めたスクロールを試してみます！
縦・横・斜めスクロールする画像
※あまり真剣に見ると酔っちゃうかもなのでご注意ください！
画像は一昨日のと同じものを使いまわしていますｗ
コード
<style><!--
@keyframes bgscr{
0%{background-position:0px 0px;}
10%{background-position:-470px 0px;}
20%{background-position:-470px -180px;}
30%{background-position:0px -180px;}
40%{background-position:0px 0px;}
50%{background-position:-470px -180px;}
60%{background-position:0px -180px;}
70%{background-position:-470px 0px;}
100%{background-position:0px 0px;}
}
--></style>
<div style="
width: 300px; height: 400px;
background-image: url('画像ファイルのURL');
background-repeat: no-repeat;
border: 1px solid black;
animation: bgscr 20s linear 0s infinite normal;
"> </div>
解説
ちょっと色々な動きを入れてしまいましたが、「色々な動き」を指定している部分は
0%{background-position:0px 0px;}
10%{background-position:-470px 0px;}
20%{background-position:-470px -180px;}
30%{background-position:0px -180px;}
40%{background-position:0px 0px;}
50%{background-position:-470px -180px;}
60%{background-position:0px -180px;}
70%{background-position:-470px 0px;}
100%{background-position:0px 0px;}
の部分になります。
各行、最初の〇％は「アニメ―ションの進行度」を示しています。
別途、アニメーションを発動させる部分で、
animation: bgscr 20s linear 0s infinite normal;
アニメ１周を20秒と定義しているので、10%あたり２秒、って事になりますね。
0%{background-position:0px 0px;}
0%、つまり開始時点では、background-positionの値を「0px 0px」としています。
これは「背景画像を右に0px、下に0pxずらして表示する」という意味になります。
次に、
10%{background-position:-470px 0px;}
10%、２秒後の時点では、
「背景画像を右に-470px（つまり左に470px）、下に0pxずらして表示する」
という指定をかけています。
アニメーションなので、「開始から２秒後までの間」は自動補完されるので、画像が滑らかに左に移動していく動きになります^^
その次には、
20%{background-position:-470px -180px;}
20%、つまり４秒後の時点で
「背景画像を右に-470px（つまり左に470px）、下に-180px（つまり上に180px）ずらして表示する」
という指定をかけているので、
「２秒かけて左に移動した画像が、今度は上に移動していく」
という動きになります。
以下、同じ要領で「A地点からB地点、B地点からC地点」って感じで指定通りに画像が移動すると、
↑こういう動きになるんですね^^
余談：JavaScriptからbackground-positionを指定
昨日の記事のゲーム、
では、JavaScriptからCSSプロパティbackground-positionを操作していましたが、その場合は
gamen.style.backgroundPosition='-470px -180px';
みたいなコードになります。（gamenと名付けた要素の背景画像位置を指定する場合）
JavaScriptからCSSプロパティを操作する場合は「.style」が間に入るのと、プロパティ名からハイフンが消えたり一部大文字になったりするようですね。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
