桜のエフェクト

by interlife

HTML

<!DOCTYPE html>
<html lang="ja">

  <head>
    <meta charset="UTF-8">
    <title>Document</title>
  </head>

  <body>
    <div id="sakura_box">
      桜エフェクト
    </div>
  </body>

</html>

SCSS

/* 桜アニメ */
#sakura_box {
	padding: 1em; 
	position: absolute; top: 0; left: 0; z-index: -1;
	width: 100%; height: 500px;
	/* 背景色はデモ用のため、実際には不要な場合もあります */
	background: #92C5E7;
	color: #fff;
	pointer-events: none;
	overflow: hidden; /* 親要素からはみ出さないように */
	img { 
		display: block;
		/* アニメ */
		position: absolute; top: 0; left: auto; right: auto;
		opacity: 0;
		/* animation: 10s kaiten2 forwards; */
		&.type1 { animation: 10s kaiten1 forwards ; }
		&.type2 { animation: 10s kaiten2 forwards ; }
		&.type3 { animation: 10s kaiten3 .5s forwards ; }
		/* &:nth-child(2n) { animation-delay: .5s; } */
		@keyframes kaiten1 {
			0% { transform:rotate(0); opacity: 0; }
			25% { transform:rotate(360deg); opacity: 1; margin-right: 10% }
			50% { transform:rotate(0deg); opacity: 1; margin-right: 0% }
			75% { transform:rotate(-360deg); margin-right: 10% }
			100% { transform:rotate(0deg); opacity: 0; margin-right: 10%; top: 100%; }
		}
		@keyframes kaiten2 {
			0% { transform:rotate(0); opacity: 0; }
			25% { transform:rotate(360deg); opacity: 1; margin-right: 0% }
			50% { transform:rotate(0deg); opacity: 1; margin-right: 0% }
			75% { transform:rotate(-360deg); margin-right: 0% }
			100% { transform:rotate(0deg); opacity: 0; margin-right: 0%; top: 100%; }
		}
		@keyframes kaiten3 {
			0% { transform:rotate(0); opacity: 0; }
			25% { transform:rotate(360deg); opacity: 1; margin-right: -10% }
			50% { transform:rotate(0deg); opacity: 1; margin-right: 0% }
			75% { transform:rotate(-360deg); margin-right: -10% }
			100% { transform:rotate(0deg); opacity: 0; margin-right: -10%; top: 100%; }
		}
	}
}

JavaScript

/* 桜エフェクト */
var kurikaese = function(){
	//指定した数だけ星をランダムな順番で出力。
	for (let i = 0; i < 15; i++) {
		//ランダムに出力
		const ramNumber_round = parseInt(Math.random() * 10000);
		//指定の範囲のランダム出力
		var randRange = function (min, max) {
			return Math.floor(Math.random() * (max - min + 1) + min);
		};
		//出力するHTMLタグ
		const el = document.createElement('img');
		//imgのclass名指定
		//console.log(i%3+1);
		el.className = 'type'+(i%3+1);
		//imgのソース指定
		el.src = 'https://www.interlifemedia.co.jp/manage/wp-content/uploads/2026/09/sakura.png'
		//imgの幅をランダムに指定
		el.style.width = randRange(10,26) + "px";
		//0-100 の%でランダムで位置指定
		el.style.right = (randRange(0,100)) + "%";
		//ランダム地が何かをコンソールで確認
		//console.log(ramNumber_round / 10 * 2);
		//ランダム秒間隔で指定タグ内に要素を出力
		setTimeout(function() {
			document.getElementById('sakura_box').appendChild(el);
			//10秒後に要素を消す
			setTimeout(function() {
			/* 要素が存在する場合のみ削除処理を行う */
			if(el.parentNode) {
				el.parentNode.removeChild(el);
			}
			}, 10000);
		}, ramNumber_round);
	}
}//kurikaese
//処理を実行
kurikaese();
//処理を10秒ごとに繰り返す
setInterval(function() {
	kurikaese();
}, 10000);
/*end_桜エフェクト*/