点滅エフェクト

by interlife

HTML

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

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

  <body>
    <div id="kirakira_box">
      きらきらエフェクト
    </div>
  </body>

</html>

SCSS

//箱のスタイル
#kirakira_box {
  padding: 1em; position: relative;
  width: 100%; height: 500px;
  background: rgb(0, 0, 0); color: gold;
  img { 
    display: block;
    border-radius: 10px;
		//CSSでサイズを限定する場合
		//  	min-width: 3%;
		//  	max-width: 30%;
		//ランダム要素の表示位置を固定する場合
		//			&:nth-child(1) { margin-top: -2%; margin-left: 85%; }
		//			&:nth-child(2) { margin-top: 2%; margin-left: 20%;  }
		//			&:nth-child(3) { margin-top: 20%; margin-left: 73%;  }
		//			&:nth-child(4) { margin-top: 28%; margin-left: 90%;  }
		//			&:nth-child(5) { margin-top: 30%; margin-left: 5%;  }
		//			&:nth-child(6) { margin-top: 90%; margin-left: 73%;  }
		//			&:nth-child(7) { margin-top: 72%; margin-left: 12%; width: 23% }
		//			&:nth-child(8) { margin-top: 96%; margin-left: 20%;  }
		//			&:nth-child(9) { margin-top: 50%; margin-left: 50%;  }
		//			&:nth-child(10) { margin-top: -15%; margin-left: -15%;  }
  }
}
//アニメーション
.glitter-star {
  position: absolute;
  min-width: (30/640)*100%;;
  height: auto;
  opacity: 1;
  /* アニメーションの設定 */
  animation: glitter 5s linear 0s infinite normal;
}

@keyframes glitter {
  0% {
    transform: scale(.5);
    opacity: 0;
  }
  25% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(.5);
    opacity: 0;
  }
  75% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(.5);
    opacity: 0;
  }
}

JavaScript

//指定した数だけ星をランダムな順番で出力。
for (let i = 0; i < 10; i++) {
  //ランダムに出力
  const ramNumber_round = parseInt(Math.random() * 5000);

  //指定の範囲のランダム出力
  const randRange = function (min, max) {
    return Math.floor(Math.random() * (max - min + 1) + min);
  };

  //出力するHTMLタグ
  const el = document.createElement('img');

  //imgのソース指定
  el.src =
    'https://www.interlifemedia.co.jp/manage/wp-content/uploads/2026/09/kirakira.png';

  //imgのclass名指定
  el.className = 'glitter-star';

  //imgの幅をランダムに指定
  el.style.width = randRange(10, 100) + 'px';

  //0-100 の%でランダムで位置指定
  el.style.top = randRange(0, 100) + '%';
  el.style.left = randRange(0, 100) + '%';

  //ランダム秒間隔で指定タグ内に要素を出力
  setTimeout(function () {
    document.getElementById('kirakira_box').appendChild(el);
    //10秒後に要素を消す
    setTimeout(function () {
      el.parentNode.removeChild(el);
    }, 10000);
  }, ramNumber_round);
}