party.jsで文字をばらまく方法
party.jsは、Webページに紙吹雪やキラキラなどのエフェクトを追加するためのJavaScriptライブラリです。このライブラリを使用すると、ユーザーの操作に応じて、さまざまな形状や色のパーティクルを画面に表示できます。
この記事では、party.jsを使用して文字をばらまく方法について説明します。
直接shapesに追加する場合
文字をばらまくには、まず文字を含む要素を作成する必要があります。次の例では、クッキーの絵文字を含む
<span>要素を作成します。|
1 2 3 |
const cookie = document.createElement('span'); cookie.innerText = '🍪'; cookie.style.fontSize = '24px'; |
次に、この要素を
shapesオプションに指定して、party.confetti()関数を呼び出します。|
1 2 3 4 5 6 |
document.querySelector('.js-cookies').addEventListener('click', function (e) { party.confetti(this, { count: party.variation.range(20, 40), shapes: [cookie], // 要素を使う }); }); |
HTMLには、次のボタンを追加します。
|
1 |
<button class="js-cookies">Give 🍪</button> |
これにより、ボタンをクリックすると、クッキーの絵文字が画面にばらまかれます。
resolvableShapesに追加する場合
文字をばらまく別の方法は、
party.resolvableShapesオブジェクトに文字を追加することです。次の例では、”A”という文字を含む<span>要素をmyStrという名前で追加します。|
1 |
party.resolvableShapes.myStr = '<span style="font-size: 20px;">A</span>'; |
次に、
shapesオプションにmyStrを指定して、party.sparkles()関数を呼び出します。
|
1 2 3 |
party.sparkles(evt.target, { shapes: ["star", 'myStr'], // 文字列で指定 }); |
これにより、ユーザーが要素をクリックすると、星と”A”という文字が画面に表示されます。esolvableShapesでは、要素またはテキストで書いた要素を指定できます。
- 要素:
document.createElement('span') - テキスト:
'<div>a</div>'
要素にどのように加工が加えられる？
party.jsは、要素に色を適用するために、次の関数を使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function defaultApplyColor(color: Color, element: HTMLElement): void { const hex = color.toHex(); // Note that by default, HTML node names are uppercase. switch (element.nodeName.toLowerCase()) { case "div": element.style.background = hex; break; case "svg": element.style.fill = element.style.color = hex; break; default: element.style.color = hex; break; } } |
この関数は、要素の
nodeNameプロパティに基づいて、要素に色を適用します。テキストの場合は<span>要素を使用すると、色が正しく適用されます。
テンプレートのデフォルト値について
party.jsのテンプレートのconfettiやsparklesのデフォルト値は、このページに記載されています。
shapesオプションには、希望の形状を追加した値を指定してください。
