Vanta.jsでサイトをおしゃれに！WordPressへの簡単な実装方法も紹介
Webサイトにちょっとした動きを加えるだけで、グッと印象が良くなるのをご存じですか？
今回ご紹介する Vanta.js は、そんな「サイトをおしゃれにする」ための強い味方です。
この記事では、Vanta.jsとは何か、そしてWordPressに簡単に実装する方法を、初心者の方にもわかりやすく解説します！
Vanta.jsってなに？
Vanta.js は、軽量、モダン、無料の3Dアニメーション背景ライブラリです。
ブラウザ上で動くふわふわとした動きや、インタラクティブな背景エフェクトを簡単に追加できるので、特別なプログラミング知識がなくても、プロっぽい動きのあるサイトが作れます！
たとえば、以下のようなエフェクトがあります。
Birds : 鳥が飛び交うようなアニメーション
Waves : ポリゴンの波が揺れるアニメーション
Clouds : 雲の中を飛んでいるようなアニメーション
Vanta.jsのここがスゴイ！
-
とても軽い
→ Webサイトの表示速度にほとんど影響しません。 -
レスポンシブ対応
→ スマホでも自然にアニメーションしてくれます。 -
マウスやタッチ操作に反応
→ ユーザーの動きに合わせてインタラクティブに変化！ -
カスタマイズ簡単
→ 色や動きの速さなども簡単に調整できます。
WordPressサイトにVanta.jsを実装する方法
WordPressでも、ちょっとした手順でVanta.jsを使うことができます。 ここではElementorを使った方法と、HTML直書きの2パターンを紹介します！
１． Elementorユーザーの場合（コードウィジェットを使う）
① Vanta.jsとThree.jsを読み込む
以下のコードをElementorの「HTML」ウィジェットに貼り付けます。
<script src=”https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vanta/0.5.24/vanta.waves.min.js”></script>
② エフェクトを適用するためのHTMLを設置
さらに同じ「HTML」ウィジェットに、エフェクトを適用するdivを作成します。
<div id=”vanta-bg” style=”width: 100%; height: 500px;”></div>
<script>
VANTA.WAVES({
el: “#vanta-bg”,
color: 0x2196f3,
shininess: 50,
waveHeight: 20,
waveSpeed: 1.5,
zoom: 0.85
});
</script>
※ color や waveHeight を変えるとデザインをカスタマイズできます！
２．コード直書き派の場合（テーマファイルに記述）
header.php もしくは ElementorのカスタムHTMLに下記を挿入します。
<!– Three.js –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js”></script>
<!– Vanta.js Wavesエフェクト –>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vanta/0.5.24/vanta.waves.min.js”></script>
<!– Vantaを適用するdiv –>
<div id=”vanta-bg” style=”width: 100%; height: 500px;”></div>
<script>
VANTA.WAVES({
el: “#vanta-bg”,
color: 0xffc107, // 好きな色に変更
shininess: 70,
waveHeight: 25,
waveSpeed: 2,
zoom: 1
});
</script>
ポイント：
「#vanta-bg」というIDを持つdivにアニメーションを適用しています。
サイズ（widthやheight）はCSSで自由に調整できます。
まとめ
Vanta.jsを使えば、サイトにインパクトを持たせつつも、表示速度にほぼ影響せず、見た目をぐっとプロっぽく演出できます。
WordPressでも数行コードを追加するだけなので、ぜひ気軽に試してみてください！
「動きのあるデザインに挑戦したい！」という方は、簡単ですので、ぜひ試してみて下さい。