完成イメージ
何かを達成した時などの演出でクラッカーのような演出を行いたいことがあると思います。
例えば「登録が完了したよ！」とか「入力がすべて完了したよ！」のようなメッセージを表示するときにちょっとした演出として紙吹雪を飛ばすとそれだけで結構それっぽくなったりします。
このような演出は１から作ろうとするととても大変ですが紹介するライブラリを利用すると超簡単に実装することができます。
そのほかにも花火などの演出が簡単にできるので詳しくは下記からデモをご覧ください。
実装方法
結論からお伝えすると下記で実装できてしまいます。
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.3.2/dist/confetti.browser.min.js"></script>
<script>
confetti({
particleCount: 100,
spread: 70,
origin: { y: 0.6 }
});
</script>特にこだわりがなければ上記のみで実装完了です。
みた感じでお分かりのようにパラメータがいくつかあるのでそちらを調整すればある程度の調整は可能です。
最後に
JavaScriptを含めたプログラミング言語の年収と習得の難しさをランキングにしてみました。
合わせてご確認ください。