【HTML】スクリプトを読み込むだけの全画面円形エフェクト

画面全体にレイヤーを表示し、複数の円が広がることでページが徐々に見えていく演出を作成しました。

円が1個通過するたびにレイヤーが20%ずつ透明になり、5個通過すると完全に透明になります。

デモ

---

黒背景サイトに対して適用

全画面デモ　背景黒版

全画面デモ　背景白版

全画面デモ　背景反映版

---

クリーム色背景サイトに対して適用

全画面デモ　背景黒版

全画面デモ　背景白版

全画面デモ　背景反映版

---

使い方

HTMLに以下のscriptタグを追加するだけで動作します。

背景黒・読み込み後に広がる版

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

背景白・読み込み後に広がる版

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

背景反映・読み込み後に広がる版

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

読み込み完了を待たずに広がる版

背景黒版

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

背景反映版

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

---

なるべく上に記述する必要があるので、headタグを閉じる直前を推奨します。

専用のHTML要素や、追加のJavaScriptコードは必要ありません。

レイヤーはタッチ操作を妨げず、演出終了後に自動的に削除されます。

ページ遷移後の表示、ローディング完了後の演出、ランディングページのファーストビューなどに利用できます。

👇パネルが画面内に入ると円が広がるスクロールアニメーション版