舞い散る桜の花びらアニメーション【HTML/CSS】

2021.3.29 HTML/CSS

こんにちわ！最近花粉の気配を感じ始めましたね・・・。

なんだかんだでもう3月に入りましたが、もう少しで桜の季節です！
ということで、HTMLとCSSで桜の花びらが舞い散るアニメーションを作ってみました。

用意するもの

●桜の花びら画像(png)

桜の花びら画像を７枚( 7パターン)用意しました。

出来上がりがこちら

See the Pen GRNYVxq by adatype (@adatype) on CodePen.

出来上がったものがこちらになります。

コードの内容については下記をご覧ください。

HTML

まず#sakura_blockの中に花びら画像たちをまとめる.sakura_parts_boxを作って、中に先ほど用意した花びら画像たちを入れて、それぞれクラスを付けます。
用意した画像は7枚ですが、画面幅いっぱいに桜を降らようと配置したら中の画像が19枚になりました。枚数は降らせたい場所のサイズに合わせて調整してください。

<div id="sakura_block">
    <div class="sakura_parts_box">
        <img src="img/parts_01.png" alt="" class="parts_01">
        <img src="img/parts_02.png" alt="" class="parts_02">
        <img src="img/parts_03.png" alt="" class="parts_03">
        <img src="img/parts_04.png" alt="" class="parts_04">
        <img src="img/parts_05.png" alt="" class="parts_05">
        <img src="img/parts_06.png" alt="" class="parts_06">
        <img src="img/parts_07.png" alt="" class="parts_07">
        <img src="img/parts_01.png" alt="" class="parts_08">
        <img src="img/parts_02.png" alt="" class="parts_09">
        <img src="img/parts_03.png" alt="" class="parts_10">
        <img src="img/parts_04.png" alt="" class="parts_11">
        <img src="img/parts_05.png" alt="" class="parts_12">
        <img src="img/parts_06.png" alt="" class="parts_13">
        <img src="img/parts_07.png" alt="" class="parts_14">
        <img src="img/parts_01.png" alt="" class="parts_15">
        <img src="img/parts_02.png" alt="" class="parts_16">
        <img src="img/parts_03.png" alt="" class="parts_17">
        <img src="img/parts_04.png" alt="" class="parts_18">
        <img src="img/parts_05.png" alt="" class="parts_19">
    </div>
</div>

CSS

CSSが長いですが、ざっくり指定したことを説明すると

1.降らせたい箇所に地味にひとつずつ桜の花びらを配置する
2.どんな風に降らせるかのアニメーションの指定をする
3.アニメーションが始まるまでの時間指定をする

といった感じになります。

1.降らせたい箇所に地味にひとつずつ桜の花びらを配置する

/*-----------------------------------
sakura_block
-----------------------------------*/
#sakura_block{
  width: 100%;
}
#sakura_block .sakura_parts_box{
  position: relative;
}
#sakura_block .sakura_parts_box img{
  position: absolute;
}
#sakura_block .sakura_parts_box img:nth-child(2n+1){
  width: 13px;/*花びらのサイズ*/
}
#sakura_block .sakura_parts_box img:nth-child(2n){
  width: 15px;/*花びらのサイズ*/
}

大枠＃sakura_blockに対してwidth: 100%;を指定しました。
ここは桜を降らせたい箇所のサイズを入れます。

その中に画像たちをまとめる親のdivを作成し、position: relative;とします。
中にimgタグで入れた花びらの画像たちにposition: absolute;を追加し、それぞれ位置を調整していきます。
花びら画像に幅13ｐｘと15ｐｘの2サイズを指定をしました。

/*-----------------------------------
桜の花びらパーツの表示位置
-----------------------------------*/
img.parts_01{top: 0; left: 5%;}
img.parts_02{top: 0; left: 12%;}
img.parts_03{top: 0; left: 15%;}
img.parts_04{top: 0; left: 22%;}
img.parts_05{top: 0; left: 25%;}
img.parts_06{top: 0; left: 28%;}
img.parts_07{top: 0; left: 35%;}
img.parts_08{top: 0; left: 40%;}
img.parts_09{top: 0; left: 43%;}
img.parts_10{top: 0; left: 50%;}
img.parts_11{top: 0; left: 55%;}
img.parts_12{top: 0; left: 60%;}
img.parts_13{top: 0; left: 63%;}
img.parts_14{top: 0; left: 70%;}
img.parts_15{top: 0; left: 75%;}
img.parts_16{top: 0; left: 81%;}
img.parts_17{top: 0; left: 85%;}
img.parts_18{top: 0; left: 90%;}
img.parts_19{top: 0; left: 93%;}

ここで先ほどposition: absolute;にしておいた一つ一つの花びらの位置を調整してあげます。等間隔で配置するよりかはちょっとランダム気味にしたほうがより自然に見えると思います。

2.どんな風に降らせるかのアニメーションの指定をする

/*-----------------------------------c
舞い散るアニメーション
どんな風に降らせるかのアニメーションの指定をする
-----------------------------------*/
@keyframes sakura {
    0% {
      opacity: 0;
    }
    20% {
      transform:translate(3px,30px) rotate(20deg);
      opacity: 1;
    }
    30% {
      transform:translate(0,50px) rotate(50deg);
    }
    50% {
      transform:translate(-20px,100px)  rotate(150deg);
    }
    70% {
      transform:translate(-40px,150px) rotate(-50deg);
      opacity: .8;
    }
    90% {
      transform:translate(-60px,200px) rotate(-180deg);
    }
    100% {
      transform:translate(-70px,230px);
      opacity: 0;
    }
}

.sakura_parts_box img {
    animation: sakura linear 6s infinite;
    /*アニメーションが始まるまで画像を見えなくしておく*/
    opacity: 0;
}

animationプロパティを使って、どんなふうに舞い散らせるかを指定します。 @keyframesの中に、アニメーションの内容を記述します。アニメーションの名前はsakuraとして、 0％～100％までtranslateで花びらを上から下へ移動させつつ、 rotateで花びらの回転もプラスしました。動き方を確認しながら微調整を繰り返します。ポイントは、下記の「opacity: 0;」です。

.sakura_parts_box img {
    animation: sakura linear 6s infinite;
    /*アニメーションが始まるまで画像を見えなくしておく*/
    opacity: 0;
}

これをいれないと、白背景に最初から花びら画像が表示されているので、花びらがボロボロ落ちてくるようなアニメーションが出来上がります・・・。（liniarをeaseにすると花びらがアメンボのような動きをします笑お暇な方はやってみてください！）

3.アニメーションが始まるまでの時間指定をする

/*-----------------------------------
アニメーションが始まるまでの時間
-----------------------------------*/
img.parts_01,img.parts_04,img.parts_07,img.parts_10,img.parts_08,img.parts_11,img.parts_13,img.parts_16,img.parts_19{
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}
img.parts_02,img.parts_05{
  -webkit-animation-delay: 1.5s;
  animation-delay: 1.5s;
}
img.parts_03,img.parts_06,img.parts_09,img.parts_12{
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}
img.parts_08,img.parts_11,img.parts_13,img.parts_16,img.parts_19{
  -webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}
img.parts_14,img.parts_17{
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}
img.parts_15,img.parts_18{
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

花びら画像それぞれでアニメーションが始まるまでの時間をずらして指定します。そうすると、花びらが時間差でハラハラと降ってくる感じになります。

長くなりましたがCSSは以上です。

まとめ

今回はHTML・CSSで桜の花びらが舞い散るアニメーションを作ってみました。
微調整を繰り返すうちについついコードが長くなるので、後で見返したときに(o゜ー゜o)？？？とならないようにコメントを残しておくのが良いですね・・！次はJavascriptバージョンにも挑戦してみたいと思います。

最後までお読みいただき、ありがとうございました！

この記事を書いた人

SNSのシェアはこちらから

最近の記事RECENT POSTS

カテゴリーCATEGORY

Contact usお問い合わせ

会社案内ダウンロード

広告代行・制作のご検討されたい方へ
パンフレットをご用意しております。
会社案内ダウンロード
お問い合わせ・ご相談

ホームページ制作・運用・更新についての
ご相談やお問い合わせはこちら
お問い合わせ・ご相談
お電話でのお問い合わせ

お電話でのご相談も随時受け付けております。
お気軽にご連絡ください。
022-716-3883 平日 9:30～18:30

スタッフブログ