【HTML】パネルが画面内に入ると円が広がるスクロールアニメーションを追加する

サイトの演出用に、パネルがスクロールで表示領域に入ったとき、ランダムな円が広がりながら出現するJavaScriptプラグインを作成しました。

左・右・下方向のスライドイン系プラグインなどとも、組み合わせて使用しやすい設計です。

デモはこちらです。

RandomCircleReveal デモ

JSを読み込む

<script src="https://uni928.github.io/Uni928PublicHTMLs2/Plugin/HtmlPanelEffect/Circle/random-circle-reveal.js"></script>

パネルにクラスを付ける

<section class="slide-in-left rcr-panel">
  パネルの内容
</section>

この例のslide-in-leftは、左方向のスライドインなどを行う他プラグイン用のクラスを想定しています。

RandomCircleRevealで使用するクラスはrcr-panelです。

rcr-panelを付けた要素は、スクロールによって表示領域に入ると自動的に演出が再生されます。

手動で再生する

既存のパネルアニメーションと同じタイミングで再生したい場合は、data-rcr-trigger="manual"を指定します。

<section id="panel" class="slide-in-right rcr-panel" data-rcr-trigger="manual">
  パネルの内容
</section>

<script>
  RandomCircleReveal.play(document.getElementById('panel'));
</script>

この例のslide-in-rightも、他プラグイン用のクラスを想定しています。

👇画面全体である代わりに簡単導入版