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

ユーザーがボタンのクリックなど、アクションをした際に紙吹雪やハートをクラッカーで弾けたようなエフェクトで表示する、楽しさを演出するJavaScriptライブラリを紹介します。

クリックするのが楽しくなるエフェクトがたくさん揃っており、「おめでとう!」「ありがとう!」「うれしい!」などを視覚的に伝えることができます。

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

Party.js
Party.js -GitHub

Party.jsの特徴

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

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

サイトのキャプチャ
  • 実装が簡単
    ライブラリをHTMLファイルに含めるだけで、準備が整います。あとは適用する要素とオプションを記述するだけで、完了します。他のすべてのセットアップは、内部で行われます。
  • 高度なカスタマイズも可能
    すべてのエフェクトにデフォルトのオプションがあり、簡単にオーバーライドできます。
  • 必要に応じてシンプルにも複雑にも
    エフェクトは1行のコードで呼び出すことも、膨大な数のオプションを使用して呼び出すこともでき、すべてのエフェクトを好みに合わせて調整できます。
  • 商用利用でも完全に無料
    MITライセンスで、個人でも商用プロジェクトでも無料で利用できます。

Party.jsのデモ

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

サイトのキャプチャ

デモページ

Party.jsの使い方

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

Step 1: インストール

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

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

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

Step 2: HTML

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

Step 3: JavaScript

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

エフェクトをさらに細かく制御したい場合は、さらにカスタマイズできます。

サイトのキャプチャ

Advanced -Party.js

詳しい実装方法は、ドキュメントをご覧ください。

サイトのキャプチャ

Documentation -Party.js

sponsors

top of page

©2021 coliss