Web上で桜をヒラヒラ舞わせてみる - Elsaの技術日記(徒然なるままに)

もうすぐ春ですね！！
春と言えば桜！！ということで、Web上で桜をヒラヒラ舞わせてみようと思い、コーディングしてみました。
まだまだ自粛でお花見も難しそうなので、お部屋で桜が舞い散る風景を見て楽しめればと思っております。

今回はフレームワークは用いずに、
　・html
　・javascript
　・css
の基本技術を用いて桜を作成していきたいと思います。

■参考資料
■結果
■桜ヒラヒラ(html)
■桜ヒラヒラ(css)
■桜ヒラヒラ(javascript)
■おまけ
■ソースコード
■最後に

■参考資料

今回桜をヒラヒラ舞わせるにあたり、こちらの記事を参考にさせて頂きました。
actyway.com

■結果

今回ご紹介するコードを実行するとこのようなWebページが作成できます。
f:id:Elsammit:20210313113737g:plain

■桜ヒラヒラ(html)

htmlですが、今回はjavascriptとcssを読み出すだけしか実行していないです。
コードはこちら。

<html>
    <head>
        <title>桜フォトフレーム</title>
    </head>
    <body>
        <link rel="stylesheet" href="sakura.css">
        <script src="sakura.js"></script>
    </body>
</html>

■桜ヒラヒラ(css)

cssでは背景画像の作成と花びらの作成を行っております。
花びらはこちらの通り作成しており、

.hana{
    position:absolute;
    height:0;
    width:0;
    border: 10px solid pink;
    border-radius:15px;
    border-top-right-radius:0;
    border-bottom-left-radius:0;
}
.hana::after{
	content:"";
	display:block;
	position:absolute;
	top:-7px;
	left:-7px;
	height:0;
	width:0;
	border: 10px solid pink;
	border-radius: 15px;
	border-top-right-radius: 0;
	border-bottom-left-radius: 0;
	-webkit-transform: rotate(15deg);
	-ms-transform: rotate(15deg);
	transform: rotate(15deg);
}

ただし、これだけだと花びら全て同一角度になってしまうので、こちらのコードで複数の角度を用意。

.type1{
    -webkit-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
    border-color:#ffecf7;
    animation:v1 6s infinite;
}

.type2{
    -webkit-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
    border-color:#ffdbf0;
    animation:v2 6s infinite;
}

.type3{
    -webkit-transform: rotate(120deg);
    -ms-transform: rotate(120deg);
    transform: rotate(120deg);
    border-color:#febae2;
    animation:v3 5s infinite;
}

.type4{
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
    border-color:#fea9db;
    animation:v4 5s infinite;
}

.type5{
    -webkit-transform: rotate(240deg);
    -ms-transform: rotate(240deg);
    transform: rotate(240deg);
    border-color:#fd77c6;
    animation:v5 4s infinite;
}

.type6{
    -webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    border-color:#fd66bf;
    animation:v6 4s infinite;
}

.type1::after{
    border-color:#ffecf7;
}

.type2::after{
    border-color:#ffdbf0;
}

.type3::after{
    border-color:#febae2;
}

.type4::after{
    border-color:#fea9db;
}

.type5::after{
    border-color:#fd77c6;
}

.type6::after{
    border-color:#fd66bf;
}

最後に、落ちていく花びらが同じ角度で落ちていくのは不自然なので、

@keyframes v1{
	0%{transform: rotate(0deg);}
	50%{transform: rotate(270deg);}
	100%{transform: rotate(1deg);}
}
@keyframes v2{
	0%{transform: rotate(-90deg);}
	50%{transform: rotate(-360deg);}
	100%{transform: rotate(-89deg);}
}
@keyframes v3{
	0%{transform: rotate(0deg);}
	50%{transform: rotate(270deg);}
	100%{transform: rotate(1deg);}
}
@keyframes v4{
	0%{transform: rotate(-90deg);}
	50%{transform: rotate(-360deg);}
	100%{transform: rotate(-89deg);}
}
@keyframes v5{
	0%{transform: rotate(0deg);}
	50%{transform: rotate(270deg);}
	100%{transform: rotate(1deg);}
}
@keyframes v6{
	0%{transform: rotate(-90deg);}
	50%{transform: rotate(-360deg);}
	100%{transform: rotate(-89deg);}
}

を追加。

背景は、

body{
    background-image: url(image/背景画像);
    background-size: cover;
    background-repeat: no-repeat;
}

で定義。

■桜ヒラヒラ(javascript)

最後にjavascriptです。
まずは花びらを生成します。
コードはこちら。

    // 花びら生成.
    for(var i=0;i<maxNum;i++){
		var m = d.createElement('div');
		m.id = 'hanabira'+i;
		top[i] = Math.random()*-1000+u;
		left[i] = Math.random()*w.innerWidth - width_padding;

                var clss = 'hana type'+(Math.floor(Math.random()*6)+1);
		m.setAttribute('class',clss);
		m.setAttribute('style','z-index:'+(z+i)+';top:'+top[i]+'px;left:'+left[i]+'px;');
		q.appendChild(m); 
		yura[i] = Math.random()*40+5; 
		speed[i] = Math.random()*5+2; 
		group[i] = d.getElementById('hanabira'+i);
		count[i] = 0;
	}

こちらでdivタグを生成の上、絶対値指定でtop、leftの位置指定を行います。
そして、先ほどのtypeクラスや落ちるスピードを指定していきます。

実際に花びらが落ちていくコードはこちら。

// 花びらを繰り返し動かす部分
setInterval(function(){
	for(var i=0;i<maxNum;i++){
		if(top[i]<u+h-40){
			if(yura[i]>=count[i]){
				left[i] = left[i]+0.5+Math.random()*0.5;
			}else{
				left[i] = left[i]-0.5-Math.random()*0.5;
			}
			if((yura[i]*2)<=count[i]){
				count[i] = 0;
			}
		}else{
			top[i] = u-40;
			left[i] = Math.random()*w.innerWidth - width_padding;
		}
		top[i] = top[i]+speed[i];
		group[i].style.top = top[i]+'px';
		group[i].style.left = left[i]+'px';
		count[i]++;
	}
},45);