Vanta.jsは、ウェブサイトの背景に美しい、インタラクティブな3Dアニメーションを簡単に追加できるJavaScriptライブラリです。このライブラリは、Three.jsやWebGLなどの技術を利用して、鳥の群れ、波の動き、煙、パーティクルシステムなど、様々な効果を実現します。利用者は数行のコードをHTMLに追加するだけで、サイトのビジュアルを引き立てるインタラクティブな背景を簡単に実装できます。Vanta.jsは、カスタマイズが容易で、レスポンシブデザインにも対応しているため、様々なデバイスでの表示に適しています。
実装内容
ここでは、Vanta.jsに用意されている「Birds」と「Net」を実際に表示し、それぞれのコード例を紹介します。デモ上でマウスや指を動かすと、背景アニメーションが操作に反応します。
Birds
Vanta.jsの「Birds」は、ウェブページの背景に鳥の群れが飛ぶアニメーションを追加できるエフェクトです。Three.jsを基盤にしており、マウスやタッチの動きに合わせて鳥の進行方向が変化します。
HTML
Three.jsを先に読み込み、その後にBirds用のVanta.jsを読み込みます。最後に、アニメーションを表示する要素のIDをelへ指定します。
<div id="your-birds"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script>
<script>
VANTA.BIRDS({
el: "#your-birds",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 500.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
backgroundColor: 0x0,
color1: 0x0e00ff,
color2: 0x3c6196,
colorMode: "lerpGradient",
birdSize: 1.10,
wingSpan: 10.00,
speedLimit: 3.00,
separation: 46.00,
alignment: 77.00,
cohesion: 55.00
});
</script>Net
Vanta.jsの「Net」は、点と点を結ぶネットワークパターンを背景へ表示するエフェクトです。こちらもThree.jsを基盤にしており、マウスやタッチの位置に応じて線の形が変化します。
HTML
Net用のファイルを読み込み、pointsで表示する点の密度を指定します。各設定値の末尾にはカンマが必要です。
<div id="your-net"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>
<script>
VANTA.NET({
el: "#your-net",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 500.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
points: 15.00
});
</script>Vanta.js
Vanta.jsにはBirdsとNet以外にも、Waves、Fog、Clouds、Cellsなどのエフェクトが用意されています。設定値を確認しながら試したい場合は、Vanta.js公式サイトを参照してください。
まとめ
- Three.jsとVanta.jsを順番に読み込むと、3Dアニメーション背景を実装できる
- 表示先の要素を用意し、そのIDを
elへ指定する - BirdsやNetなど、用途に合うエフェクトを公式サイトで選べる
- マウス操作とタッチ操作の両方に対応できる
- スマートフォンでは幅と描画負荷も確認する
MEMBER COMMENTS
コメント（0件）