目次
Canvas Confettiとは
canvasとはHTML5とJavaScriptを使用した動的な2次元ビットマップ画像の描画のためのHTML要素。
Confettiは「紙吹雪」の意味でCanvas Confettiはcanvasを使用した紙吹雪アニメーションのJavaScriptライブラリ。
使用するにはnpm i -D canvas-confettiでインストールするか、scriptタグでCDNのJavaScriptファイルを読み込む。
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>
2. confetti()を1秒おきに実行
Webサイトで紙吹雪を表示したい場合は1回ではなくページを開いている間は永遠に紙吹雪を表示させる必要があるのでconfetti()を1秒ごとに実行するようにする。
confetti()
setInterval(function() {
requestAnimationFrame(confetti)
}, 1000)
3. 中央だけでなく左右ランダムに
紙吹雪は画面中央だけでなく上から左右ランダムに表示されるのが好ましいためオプションのoriginにxとyの位置を指定する。
(function confettiAnime() {
confetti({
origin: {
x: Math.random(),
y: 0
}
})
setTimeout(function() {
requestAnimationFrame(confettiAnime)
}, 1000)
})()
4. particleCountで数を減らす
デフォルトだとconfetti()実行時の紙吹雪の数は50と多めなので、Webサイトに軽いアクセントとしてアニメーションを入れたい場合は6くらいに減らすとちょうど良い。
紙吹雪を多く表示すると処理が重くなるので負荷軽減の効果もある。
(function confettiAnime() {
confetti({
origin: {
x: Math.random(),
y: 0
},
particleCount: 6,
})
setTimeout(function() {
requestAnimationFrame(confettiAnime)
}, 1000)
})()
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)
})()
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)
})()
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タグに描画
画面全体ではなく特定の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)
})()
