party.js

party.jsは任意の要素に好みのエフェクトを付与できるシンプルなJavaScriptライブラリです。

導入も操作も簡単で、利用するに特に困る事も無さそうなので覚えておこうかなと思います。

以下動作サンプルです。

ボタンにクリックするとクラッカー🎉が表示されるエフェクトが追加されています。

<script src="https://cdn.jsdelivr.net/npm/party-js@latest/bundle/party.min.js"></script>

CDNが用意されていたので今回は使わせてもらいました。

document.querySelector(".button").addEventListener("click", function(e) {
    party.confetti(this, {
        count: party.range(20, 40)
    });
});

セレクタを指定してエフェクトを追加。

<button class="button" onmousedown="party.confetti(this)">クリック!</button>

マウスを押したらイベントが発火するように設定。

エフェクトはいろいろデフォルトが用意されていますが自身の設定でオーバーライドする事も出来ます。

お手軽で使いやすそうな印象でした。ライセンスはMITとの事です。

party.js