JavaScriptライブラリCanvas Confettiで紙吹雪アニメーション作成

Canvas Confettiとは

canvasとはHTML5とJavaScriptを使用した動的な2次元ビットマップ画像の描画のためのHTML要素。

Confettiは「紙吹雪」の意味でCanvas Confettiはcanvasを使用した紙吹雪アニメーションのJavaScriptライブラリ。

使用するにはnpm i -D canvas-confettiでインストールするか、scriptタグでCDNのJavaScriptファイルを読み込む。

Canvas Confetti

1. confetti()を実行

例えば以下のようにCanvas Confettiの.jsファイルを読み込んでconfetti()を実行すれば紙吹雪が1回表示されるアニメーションになる。

<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.3.2/dist/confetti.browser.min.js"></script>
<script>
confetti()
</script>

Canvas Confetti Sample 1

2. confetti()を1秒おきに実行

Webサイトで紙吹雪を表示したい場合は1回ではなくページを開いている間は永遠に紙吹雪を表示させる必要があるのでconfetti()を1秒ごとに実行するようにする。

confetti()
setInterval(function() {
  requestAnimationFrame(confetti)
}, 1000)

Canvas Confetti Sample 2

3. 中央だけでなく左右ランダムに

紙吹雪は画面中央だけでなく上から左右ランダムに表示されるのが好ましいためオプションのoriginにxとyの位置を指定する。

(function confettiAnime() {
  confetti({
    origin: {
      x: Math.random(),
      y: 0
    }
  })
  setTimeout(function() {
    requestAnimationFrame(confettiAnime)
  }, 1000)
})()

Canvas Confetti Sample 3

4. particleCountで数を減らす

デフォルトだとconfetti()実行時の紙吹雪の数は50と多めなので、Webサイトに軽いアクセントとしてアニメーションを入れたい場合は6くらいに減らすとちょうど良い。

紙吹雪を多く表示すると処理が重くなるので負荷軽減の効果もある。

(function confettiAnime() {
  confetti({
    origin: {
      x: Math.random(),
      y: 0
    },
    particleCount: 6,
  })
  setTimeout(function() {
    requestAnimationFrame(confettiAnime)
  }, 1000)
})()

Canvas Confetti Sample 4

5. ticksで途中で消えないようにする

Canvas Confettiはデフォルトの設定だと紙吹雪が表示されてから少し下に落ちると消えるようになっているため、画面下まで表示するためにticks: 1000を設定する。

ticksのデフォルトは200で、この数値が大きいほど消えるまでの距離が伸びる。

(function confettiAnime() {
  confetti({
    origin: {
      x: Math.random(),
      y: 0
    },
    particleCount: 6,
    ticks: 1000,
  })
  setTimeout(function() {
    requestAnimationFrame(confettiAnime)
  }, 1000)
})()

Canvas Confetti Sample 5

6. zIndex: -1にする

Canvas Confettiはデフォルトの設定だとzIndexが100になっており、コンテンツの全面に紙吹雪が表示されてしまう。

これだと文章の前面に紙吹雪が表示されて読みにくくなってしまうためzIndex: -1を指定する。

(function confettiAnime() {
  confetti({
    origin: {
      x: Math.random(),
      y: 0
    },
    particleCount: 6,
    ticks: 1000,
    zIndex: -1,
  })
  setTimeout(function() {
    requestAnimationFrame(confettiAnime)
  }, 1000)
})()

Canvas Confetti Sample 6

7. 紙吹雪の色を指定する

デフォルトの設定だと紙吹雪の色が鮮やかすぎるのでオプションにcolorsを配列で入れて明度を上げた色に変更する。

以上の手順で簡単にWebページの背景に紙吹雪を実装できる。

(function confettiAnime() {
  confetti({
    origin: {
      x: Math.random(),
      y: 0
    },
    particleCount: 6,
    ticks: 1000,
    zIndex: -1,
    colors: [
      '#ff9e9e',
      '#ff9eff',
      '#9e9eff',
      '#9effff',
      '#9eff9e',
      '#ffff9e'
    ]
  })
  setTimeout(function() {
    requestAnimationFrame(confettiAnime)
  }, 1000)
})()

Canvas Confetti Sample

紙吹雪をcanvasタグに描画

画面全体ではなく特定のcanvasタグに描画する場合はcanvasタグにidを付けて以下のように指定する。

(function confettiAnime() {
  var canvas = document.getElementById('canvas')
  canvas.confetti = canvas.confetti || confetti.create(canvas, { resize: true })
  canvas.confetti({
    origin: {
      x: Math.random(),
      y: 0
    },
    particleCount: 6,
    ticks: 1000,
    zIndex: -1,
    colors: [
      '#ff9e9e',
      '#ff9eff',
      '#9e9eff',
      '#9effff',
      '#9eff9e',
      '#ffff9e',
    ]
  })
  setTimeout(function() {
    requestAnimationFrame(confettiAnime)
  }, 1000)
})()

Canvas Tag Confetti Sample