Glitter star effect

ソシャゲのガチャのキラキラエフェクトをJavaScriptとCSSで再現してみる

by bc_rikko

HTML

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

CSS

#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;
}

@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;
  }
}

JavaScript

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)
}