桜のエフェクト

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_桜エフェクト*/