CSS3と複数の正方形画像だけで作れるアニメーション背景のサンプルコード
こんにちは! 手軽に簡単におしゃれなコーディングを実現したいですよね？
コーディングは1日1ページが限度ですので、作業効率化は非常に重要です。
そんなわけで、私は常日頃サンプルコードを研究し、紹介しています。
正方形画像を使った背景アニメーション
今回はCSSだけで作れる複数の正方形画像を用いたアニメーション背景のサンプルコードを紹介します。
HTMLの解説
HTML
<div class="leaf leaf1">
<div> <img src="https://idea-hack.com/wp-content/uploads/2020/12/Autumn-Fall-Leaves-Clip-Art-PNG.png" height="75px" width="75px"></img></div>
<div><img src="https://idea-hack.com/wp-content/uploads/2020/12/Transparent-Autumn-Leaves-Falling-PNG.png" height="75px" width="75px"></img></div>
<div> <img src="https://idea-hack.com/wp-content/uploads/2020/12/Fall-Autumn-Leaves-Transparent-PNG.png" height="75px" width="75px" ></img></div>
<div><img src="https://idea-hack.com/wp-content/uploads/2020/12/Green-Leaves-PNG-File.png" height="75px" width="75px"></img></div>
<div> <img src="https://idea-hack.com/wp-content/uploads/2020/12/Realistic-Autumn-Fall-Leaves-PNG.png" height="75px" width="75px"></img></div>
<div> <img src="https://idea-hack.com/wp-content/uploads/2020/12/autumn_leaves_025.png" height="75px" width="75px"></div>
<div><img src="https://idea-hack.com/wp-content/uploads/2020/12/autumn_leaves_025.png" height="75px" width="75px"></div>
</div>
<div class="leaf leaf2">
<div> <img src="https://idea-hack.com/wp-content/uploads/2020/12/Autumn-Fall-Leaves-Clip-Art-PNG.png" height="75px" width="75px"></img></div>
<div><img src="https://idea-hack.com/wp-content/uploads/2020/12/Transparent-Autumn-Leaves-Falling-PNG.png" height="75px" width="75px"></img></div>
<div> <img src="https://idea-hack.com/wp-content/uploads/2020/12/Fall-Autumn-Leaves-Transparent-PNG.png" height="75px" width="75px" ></img></div>
<div><img src="https://idea-hack.com/wp-content/uploads/2020/12/Green-Leaves-PNG-File.png" height="75px" width="75px"></img></div>
<div> <img src="https://idea-hack.com/wp-content/uploads/2020/12/Realistic-Autumn-Fall-Leaves-PNG.png" height="75px" width="75px"></img></div>
<div> <img src="https://idea-hack.com/wp-content/uploads/2020/12/autumn_leaves_025.png" height="75px" width="75px"></div>
<div><img src="https://idea-hack.com/wp-content/uploads/2020/12/autumn_leaves_025.png" height="75px" width="75px"></div>
</div>この部分で、まず背景に利用する画像を定義します。このコードを更に細分化させると2つに分けられます。
HTML
<div class="leaf leaf1">
<div> <img src="https://idea-hack.com/wp-content/uploads/2020/12/Autumn-Fall-Leaves-Clip-Art-PNG.png" height="75px" width="75px"></img></div>
<div><img src="https://idea-hack.com/wp-content/uploads/2020/12/Transparent-Autumn-Leaves-Falling-PNG.png" height="75px" width="75px"></img></div>
<div> <img src="https://idea-hack.com/wp-content/uploads/2020/12/Fall-Autumn-Leaves-Transparent-PNG.png" height="75px" width="75px" ></img></div>
<div><img src="https://idea-hack.com/wp-content/uploads/2020/12/Green-Leaves-PNG-File.png" height="75px" width="75px"></img></div>
<div> <img src="https://idea-hack.com/wp-content/uploads/2020/12/Realistic-Autumn-Fall-Leaves-PNG.png" height="75px" width="75px"></img></div>
<div> <img src="https://idea-hack.com/wp-content/uploads/2020/12/autumn_leaves_025.png" height="75px" width="75px"></div>
<div><img src="https://idea-hack.com/wp-content/uploads/2020/12/autumn_leaves_025.png" height="75px" width="75px"></div>
</div>こちらは上から始まるアニメーションのために使用する画像の定義です。
HTML
<div class="leaf leaf2">
<div> <img src="https://idea-hack.com/wp-content/uploads/2020/12/Autumn-Fall-Leaves-Clip-Art-PNG.png" height="75px" width="75px"></img></div>
<div><img src="https://idea-hack.com/wp-content/uploads/2020/12/Transparent-Autumn-Leaves-Falling-PNG.png" height="75px" width="75px"></img></div>
<div> <img src="https://idea-hack.com/wp-content/uploads/2020/12/Fall-Autumn-Leaves-Transparent-PNG.png" height="75px" width="75px" ></img></div>
<div><img src="https://idea-hack.com/wp-content/uploads/2020/12/Green-Leaves-PNG-File.png" height="75px" width="75px"></img></div>
<div> <img src="https://idea-hack.com/wp-content/uploads/2020/12/Realistic-Autumn-Fall-Leaves-PNG.png" height="75px" width="75px"></img></div>
<div> <img src="https://idea-hack.com/wp-content/uploads/2020/12/autumn_leaves_025.png" height="75px" width="75px"></div>
<div><img src="https://idea-hack.com/wp-content/uploads/2020/12/autumn_leaves_025.png" height="75px" width="75px"></div>
</div>こちらは下から始まるアニメーションのために使用する画像の定義です。
CSSの解説
positionプロパティを使って、画像を画面の左上に全て配置します。
nth-childプロパティを使って、各画像を水平方向に好みの位置に反映します。
CSS
.leaf{
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
}
.leaf div {
position:absolute;
display:block;
}
.leaf div:nth-child(1) {
left:20%;
animation:fall 15s linear infinite;
animation-delay:-2s;
}
.leaf div:nth-child(2) {
left:70%;
animation:fall 15s linear infinite;
animation-delay:-4s;
}
.leaf div:nth-child(3) {
left:10%;
animation:fall 20s linear infinite;
animation-delay:-7s;
}
.leaf div:nth-child(4) {
left:50%;
animation:fall 18s linear infinite;
animation-delay:-5s;
}
.leaf div:nth-child(5) {
left:85%;
animation:fall 14s linear infinite;
animation-delay:-5s;
}
.leaf div:nth-child(6) {
left:15%;
animation:fall 16s linear infinite;
animation-delay:-10s;
}
.leaf div:nth-child(7) {
left:90%;
animation:fall 15s linear infinite;
animation-delay:-4s;
}この状態では、2つの画像群が重なってる状態になります。今回はアニメーションが上下から適用されて欲しいので、transformプロパティーを使って片方を画面の下に移動させます。
CSS
.leaf1 {
transform: rotateX(180deg);
}
KAZU
rotateを使って要素を回転させるので、その要素は後ほど定義するアニメーションの方向にも影響を与えます。rotateを加えていない状態だと上から下のアニメーションになるところ、rotateを使うと動きが逆になるんです。
アニメーションを使って、上から下に各画像がスライドする効果を適用します。
CSS
@keyframes fall {
0% {
opacity:1;
top:-10%;
}
20%{
opacity:0.8;
}
100%{
top:110%;
}
}開始時を-10%にして、終了時を110%にすることで、アニメーションの開始と終了が画面外で行われるため、背景がループしているような効果が適用されます。
