ソシャゲのガチャみたいなキラキラ星エフェクトをjsとcssで表現する

クリスマスも近いし、雰囲気だけでもとりあえずキラキラさせとけと思い、JavaScriptとCSSだけで星の煌めきみたいなエフェクトを実装した。ライブラリは何も使っておらず、IE11、MS Edge、Fireox、Chrome、Safariで動作確認済みだ。

タイトルにはソシャゲだのガチャだの書いてあるが、実際ソシャゲをやったこともないし、どんなものなのか見たこともない。ガチャなんて幼少期に100円のカードダスをやったくらいしか経験がない。

なので、自分が思うキラキラエフェクトをつくった。
イメージはこんな感じ。

キラキラ光る星っぽいエフェクトをつくる

今回は星のイメージは、ICOOON MONOの「アスタリスクの記号」をお借りした。
文字の「＊」でも問題ない。

<div id="app">
  <img class="character" src="https://pbs.twimg.com/profile_images/751035224700522496/YCsfWM6Q.jpg">
</div>

#app {
  position: relative;
  width: 640px;
  height: 400px;
  background-color: #333333;
}
.character {
  position: absolute;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  witdh: 100px;
  height: 100px;
  border-radius: 5px;
}

img.glitter-star {
  position: absolute;
  height: 16px;
  width: 16px;

  /* アニメーションの設定 */
  animation: glitter 2s linear 0s infinite normal;
  -webkit-animation: glitter 2s linear 0s infinite normal;
  -moz-animation: glitter 2s linear 0s infinite normal;
  -ms-animation: glitter 2s linear 0s infinite normal;
  -o-animation: glitter 2s linear 0s infinite normal;
}

/* 必要に応じてベンダープレフィックス（-moz-, -ms-, -o-）をつける */
@keyframes glitter {
  0% {
    -webkit-transform: scale(1.0);
    opacity: 1;
  }
  25% {
    -webkit-transform: scale(0.5);
    opacity: 0;
  }
  50% {
    -webkit-transform: scale(1.0);
    opacity: 1;
  }
  75% {
    -webkit-transform: scale(0.5);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 1;
  }
}

const app = document.getElementById('app')

const myRand = () => {
  let r = 50
  while (40 < r && r < 60) {
    r = Math.random() * 100
  }
  return r
}

for (let i = 0; i < 50; i++) {
  const delay = Math.random() + 's';
  const el = document.createElement('img')
  el.src            = 'https://dl.dropboxusercontent.com/s/soxcov4m81dx55l/star.svg'
  el.className      = 'glitter-star'
  el.style.top      = myRand() + '%'
  el.style.left     = myRand() + '%'
  el.style.animationDelay       = delay
  el.style.msAnimationDelay     = delay
  el.style.webkitAnimationDelay = delay
  el.style.monAnimationDelay    = delay
  app.appendChild(el)
}

やっていることは、posision: absoluteにして、top、leftの値を0%〜100%からランダムで設定。animation-delayもランダムな値を設定し、バラバラに点滅するようにしている。
あとは、keyframeでscaleを大きくしたり小さくしたり、opacityで透過させたり表示させたりしている。

JavaScriptのmyRandファンクションは、真ん中にアイコンを置いているので、星がかぶらないようにしているだけ。
ただこのままの実装だと、縦横ともに40〜60%の部分に星が表示されないので不自然かも。top・leftの双方が40〜60%なら値の再取得、片方だけなら許容するようにするなど実装のほうが良いかもしれない。

SVGは、imgタグで読み込んでいるので色を変更することができない。
Objectで読み込んだり、直接SVGのコードをコード内に入れることもできるが、ちょっと面倒だったので、色付きのSVGファイルを用意して使った。




以下の重み付けされた値をランダムに取得する方法を併用すれば、ガチャっぽいものがすぐにでも実装できるだろう。




以上

written by @bc_rikko