どうも！LSSです！！
mioさん(id:mio20100501)が、はてなブログの記事背景でダイバーが潜水するアニメーション背景に挑戦されていました。
美麗な画像で、潜水するダイバーの動きにとても迫力があります^^
そこで、「潜水するダイバーと浮上するダイバーを同時に表示できるか」という話になったので、ちょっと作ってみました。
…ただし、こちらのこの記事ではLSSが適当に描いた画像を使用していますｗ
コード
<style>
@keyframes divers{
0%{background-position:0px 0px,0px 0px,0px 0px;}
100%{background-position:-800px 1600px,0px -800px,0px 0px;}/*ダイバー画像２種の変化後の位置を800の倍数で指定*/
}
article{
background-image:/*ダイバー１、ダイバー２、背景の順に指定*/
url('https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20220521/20220521213902.png'),
url('https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20220521/20220521213918.png'),
url('https://cdn-ak.f.st-hatena.com/images/fotolife/l/little_strange/20220521/20220521213844.png')!important;
background-size:800px 800px,800px 800px,100% 400px!important;/*ダイバー画像２種を800px 800pxで表示、背景は100% 400pxで表示*/
background-attachment:scroll,scroll,fixed!important;
animation:divers 15s linear infinite;
}
</style>
使用画像
以下３つの画像を適当に描いて使用しました。
（いずれも、横400px 縦400px）
ダイバーの画像については、背景を透過しています。
画像サイズに対してのダイバーのサイズによって、画面上に現れる密度が変わります。
表示サイズと移動量の話
まず、コード中の
background-size:800px 800px,800px 800px,100% 400px!important;
の箇所で、画像の表示サイズを決めています。
カンマ区切りで３回、「幅px 高さpx」の形式で、「ダイバー１、ダイバー２，海背景」の順に指定してます。
そして、移動については@keyframesの指定で、background-positionの値を指定する事で移動しています。
0%{background-position:0px 0px,0px 0px,0px 0px;}
100%{background-position:-800px 1600px,0px -800px,0px 0px;}
画像別に色分けすると↑こうなります。
例えば「ダイバー１」は、最初「0px 0px」の位置だったのが「-800px 1600px」の位置に移動する、という動きになるんですね。
-800pxという事は「左に800px」、次が1600pxという事は「下に1600px」という事となり、その位置に向かって進む事になります。
コード中コメントに「/*ダイバー画像２種の変化後の位置を800の倍数で指定*/」と書きました。
これは「表示サイズを幅800px 高さ800pxしている」事から、アニメーション完了時点の位置の差をその倍数で指定する事で、次回のアニメーションの開始位置とズレずに済むようにするためです。
余談
画像によっては、文章が読みにくくなってしまいます^^;
今回の記事では、文章部分の背景を「半透明の白」に指定しました。
<p style="background: #ffffff80; padding: 0.6em;">画像によっては、文章が読みにくくなってしまいます^^;<br/>今回の記事では、文章部分の背景を「半透明の白」に指定しました。</p>
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
