ネタバレのテキストを非表示にする、美しいパーティクルアニメーションを備えた高速で軽量なコンポーネント -spoilerjs
Post on:2025年12月10日
sponsorsr
ネタバレのテキストをTelegram風のパーティクルアニメーションを備えたエフェクトで非表示にし、クリックするとそのテキストが表示されるJavaScriptで実装された軽量のWebコンポーネントを紹介します。
依存関係はなしで、スマホでもタブレットでもデスクトップでも機能します。
spoilerjsの特徴
spoilerjsは、依存関係のないWebコンポーネントで、ネタバレ警告付きのテキストを一時的に非表示にすることができます。
ビジターがネタバレのテキストをクリックすると、Telegramアプリにインスパイアされた美しいパーティクルアニメーションとともにテキストが表示されます。パフォーマンスが高く、実装も簡単で、あらゆるモダンブラウザで動作します。
主な特徴は、下記の通り。
- 軽量で高性能: 依存関係はなく、Webコンポーネントのみ。
- 実装が簡単: ネタバレテキストを
<spoiler-span>で囲むだけ。 - カスタマイズ: パーティクルエフェクトや色などをカスタマイズできます。
- アクセシビリティ: アクセシビリティに配慮して実装されています。
- フレームワーク非依存: あらゆるフレームワークで動作し、フレームワークなしでも動作します。
spoilerjsのデモ
デモでは、さまざまなエフェクトでネタバレのテキストが非表示にされています。ネタバレ部分をクリックすると、テキストが表示されます。
<spoiler-span>で囲むだけなので、さまざまなテキスト箇所に適用できるのが便利ですね。
spoilerjsの使い方
spoilerjsはnpmからインストールできます。
|
1 |
npm install spoilerjs |
コンポーネントをインポートします。
|
1 |
import 'spoilerjs/spoiler-span'; |
あとは、ネタバレテキストを<spoiler-span>で囲むだけです。
|
1 2 3 4 5 |
<p>ご注意ください。ここからネタバレテキストです。 <spoiler-span> ネタバレのテキストてす。 </spoiler-span> </p> |
カスタマイズも簡単です。
<spoiler-span>要素に属性を追加して、外観や動作をカスタマイズできます。
|
1 2 3 4 5 6 7 |
<spoiler-span density="15" particle-lifetime="200" reveal-duration="1000" > ネタバレのテキストてす。 </spoiler-span> |
density: 粒子の密度particle-lifetime: フレーム単位の粒子の寿命reveal-duration: テキストが表示される際のフェードイン期間
他にもさまざまなカスタマイズができます。
scale: 粒子サイズのスケール係数min-velocity: 粒子の最小速度max-velocity: 粒子の最大速度spawn-stop-delay: クリック後にパーティクルの生成を停止するまでの遅延monitor-position: ホバー効果と変換の位置を継続的に監視fps: パーティクルアニメーションの1秒あたりの目標フレーム数
sponsors
