UIでボタンをクリックするのが楽しくなるエフェクトがたくさん揃ったJavaScriptライブラリ -Party.js

サイト構築 -JavaScript

Post on:2021年5月12日

Party.jsの特徴

Party.jsは「おめでとう！」「ありがとう！」「うれしい！」などを視覚的に表現するエフェクトを実装し、ユーザーのサイトエクスペリエンスを明るく楽しくするJavaScriptライブラリです。

ユーザーのアクションに伴い、紙吹雪やハートやキラキラなどのエフェクトを簡単に実装できます。

実装が簡単

ライブラリをHTMLファイルに含めるだけで、準備が整います。あとは適用する要素とオプションを記述するだけで、完了します。他のすべてのセットアップは、内部で行われます。
高度なカスタマイズも可能

すべてのエフェクトにデフォルトのオプションがあり、簡単にオーバーライドできます。
必要に応じてシンプルにも複雑にも

エフェクトは1行のコードで呼び出すことも、膨大な数のオプションを使用して呼び出すこともでき、すべてのエフェクトを好みに合わせて調整できます。
商用利用でも完全に無料

MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。

Party.jsのデモ

デモでは、紙吹雪・キラキラ・ハートなどが舞い散ります。それぞれの動きは異なり、紙吹雪は舞い上がって下に落ち、ハートはたくさんのハートが全方向に散らばります。

デモページ

Party.jsの使い方

ライブラリはTypeScriptで記述されており、コンパイルされているので、さまざまな環境で利用できます。

Step 1: インストール

使用するHTMLに当スクリプトを外部ファイルとして記述します。

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

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

パッケージマネージャー経由でも利用できます。

npm install party-js
# or
yarn add party-js

npm install party-js

# or

yarn add party-js

使用するには、インポートするだけです。

import * as party from "party-js";
// or
const party = require("party-js");

import * as party from "party-js";

// or

const party = require("party-js");

Step 2: HTML

ボタンがクリックされた時にconfetti（紙吹雪）のエフェクトを実装します。

<div class="button" onmousedown="party.confetti(this)">Click me!</div>

1	<div class="button" onmousedown="party.confetti(this)">Click me!</div>

Step 3: JavaScript

適用する要素を指定とトリガーを指定し、エフェクトの量を定義します。

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