簡単！Vanta JSでクールに動く背景エフェクトを作成しよう👍

この記事では、Vanta JSを使用してウェブページの背景にインタラクティブなエフェクトを追加する方法について説明します。Vanta JSは、ウェブデザインにおける背景のビジュアルエフェクトを作成するための素晴らしいライブラリの一つです。このライブラリを使用すると、マウスの移動、モバイルデバイスの傾きなど、さまざまな入力に対応する背景エフェクトを簡単に組み込むことができます。

HTML構造

最初に、HTML構造を確認しましょう。以下はHTMLの一部です：

<div id="vantajs-bg"></div>
<div class="container">
    <h2> Vanta JS</h2>
    <p>Vanta.js インタラクティブ背景のデモンストレーション</p>
    <p>マウスの移動 / モバイル デバイスの傾き</p>
    <select class="form-select" id="effect">
        <option value="0">とり🦆</option>
        <option value="1">光✨</option>
        <option value="2">霧</option>
        <option value="3">なみ🌊</option>
        <option value="4">ドット</option>
        <option selected value="5">くも☁︎</option>
    </select>
</div>
<footer>
    <p>by <a href="https://prodouga.com"> Prodouga</a><strong>☕️</strong></p>
</footer>

このHTMLコードは、背景エフェクトを適用する要素（<div id="vantajs-bg"></div>）とエフェクトのオプションを選択するためのセレクトボックスを含んでいます。

CSSスタイル

次に、CSSスタイルを確認しましょう。これにより、ウェブページが美しくスタイリッシュに見えるようになります。

/* スタイル定義 */

この部分は、ウェブページのスタイリングに関するCSSコードです。フォント、背景、テキストカラー、セレクトボックスなどが設定されています。

JavaScriptコード

最も重要なのは、Vanta JSを使用して背景エフェクトを適用するJavaScriptコードです。以下のJavaScriptコードは、背景エフェクトの選択と実行に関連しています。

var bgEffects = {
    "0": VANTA.BIRDS,
    "1": VANTA.HALO,
    "2": VANTA.FOG,
    "3": VANTA.WAVES,
    "4": VANTA.DOTS,
    "5": VANTA.CLOUDS
}

document.getElementById("effect").addEventListener("change", () => run());

function run() {
    const effectID = document.getElementById("effect").value;
    bgEffects[effectID]({
        el: document.getElementById("vantajs-bg"),
        mouseControls: true,
        touchControls: true,
        gyroControls: true,
        minHeight: 200.00,
        minWidth: 200.00,
        scale: 1.00,
        scaleMobile: 1.00
    });
}
run();

このJavaScriptコードは、セレクトボックスの変更イベントをリッスンし、選択されたエフェクトを実行します。Vanta JSライブラリのエフェクトはbgEffectsオブジェクトにマップされており、選択されたエフェクトに対応する関数を呼び出すことで背景エフェクトを適用します。

結論

Vanta JSを使用することで、ウェブページの背景に簡単にインタラクティブなエフェクトを追加できます。ユーザーが異なるエフェクトを選択できるため、ウェブページのビジュアルデザインを向上させ、魅力的なユーザーエクスペリエンスを提供できます。 Vanta JSを使用して、ウェブデザインにクリエイティブな要素を追加しましょう。