SOURCE

(function () {
  const star_png = 'http://flowpp.com:8080/img/star.png'
  const ICON_SIZE = 7
  const ICON_NUM = 7
  const star_num = 300

  class Start {
      constructor (star, rect) {
          this.star = star
          this.init(rect)
      }
      init (rect) {
          this.rect = rect || this.rect
          this.index = Math.random() * ICON_NUM | 0
          this.x = Math.random() * this.rect.width
          this.xSpd = Math.random() * 0.04 - 0.02
          this.y = Math.random() * this.rect.height
          this.alpha = Math.sin(Math.random() * Math.PI * 2)
          this.timer = 0
      }
      draw (ctx) {
          ctx.save()
          ctx.globalAlpha = this.alpha * 0.2
          ctx.drawImage(this.star, this.index * ICON_NUM, 0, ICON_SIZE, ICON_SIZE, this.x, this.y, ICON_SIZE, ICON_SIZE)
          ctx.restore()
      }
      update () {
          this.x += this.xSpd
          if (this.x > this.rect.width || this.x < 0) {
              this.init()
          }

          this.timer += 1
          if (this.timer > 8) {
              this.index = (this.index + 1) % ICON_NUM
              this.timer = 0
          }
      }
  }
  
  class StarrySky {
      constructor (props) {
          let dom = props.dom
          let t = this
          t.dom = dom
          t.context = dom.getContext('2d')
          t.star = new Image()
          t.now = Date.now()

          let stars = []
          t.stars = stars

          let loop = t.loop
          t.star.onload = function () {
              t.rect = dom.getBoundingClientRect()
              t.dom.width = t.rect.width
              t.dom.height = t.rect.height

              for (let i = 0; i < star_num; i++) {
                  stars[i] = new Start(t.star, t.rect)
              }

              setInterval(loop, 40)

              window.addEventListener('resize', function () {
                  t.rect = dom.getBoundingClientRect()
                  t.dom.width = t.rect.width
                  t.dom.height = t.rect.height
                  stars.map(s => {
                      s.init(t.rect)
                  })
              })
          }
          this.star.src = star_png
      }
      loop = () => {
          this.context.fillStyle = 'rgb(10, 15, 39)'
          let {width, height} = this.rect
          this.context.fillRect(0, 0, width, height)
          for (let i = 0; i < star_num; i++) {
              this.stars[i].update()
              this.stars[i].draw(this.context)
          }
      }
  }
  
 	const canvas = document.createElement('canvas')
  canvas.width = document.documentElement.clientWidth
  canvas.height = document.documentElement.clientHeight
  document.body.insertBefore(canvas, document.body.children[0])
  canvas.className = 'starry-sky'
  let starrySky = new StarrySky({
      dom: canvas
  })
  
})()

html, body {
  overflow: hidden
}