Vanta.jsで3Dアニメーションを手軽に実装！

2022年1月25日
JavaScript, jsjs

3Dアニメーションが手軽に実装できるVanta.jsというJavaScriptのライブラリがあります。Webサイト上で色や表示方法をカスタマイズして、コピペするだけで完成です。今回はこのJavaScriptライブラリを紹介します！

↑私が10年以上利用している会計ソフト！

この記事は動画でも紹介しています。動画派の方はこちらをどうぞ！

鳥をふわふわ動かしてみよう

Vanta.jsのサイトに行くと、デモとして鳥がふよふよ飛んでるような背景が表示されています。この画面右側に、カスタマイズするためのパネルが用意されているので、好みのデザインに変えてみましょう。「Birds」の場合は色や鳥の数、鳥のサイズ、スペース、スピードなどが調整できます。

<div id="bird"></div>

<script src="three.r119.min.js"></script>
<script src="vanta.birds.min.js"></script>
<script>
VANTA.BIRDS({
  el: "#bird",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 200.00,
  minWidth: 200.00,
  scale: 1.00,
  scaleMobile: 1.00,
  backgroundColor: 0x2266,
  color1: 0x8a93,
  birdSize: 1.70,
  separation: 31.00
})
</script>

カスタマイズした後は、パネルのすぐ下にあるコードをそのままHTMLファイルにコピペします。そして #your-element-selector の部分に描画したい要素のIDを書きます。ここでは「bird」というIDを用意しました。

<div id="bird"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script>
<script>
VANTA.BIRDS({
  el: "#bird",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 200.00,
  minWidth: 200.00,
  scale: 1.00,
  scaleMobile: 1.00,
  backgroundColor: 0x2266,
  color1: 0x8a93,
  birdSize: 1.70,
  separation: 31.00
})
</script>

動作させるのに必要な2つのファイルを読み込ませます。JavaScriptファイルをダウンロードして読み込ませてもいいですし、用意されているCDNのURLを記述してもOK。CDNを使う場合は、カスタマイズパネルに表示されているファイル名を右クリック→「リンクアドレスをコピー」でコピーして貼り付けましょう。

See the Pen
Vanta.js Demo by Mana (@manabox)
on CodePen.

そうすると鳥が表示されます！簡単ですね！初期値だと高さが200になっているので、minHeight の数値を変えるといいでしょう。上記は3Dアニメーションに見出しを重ねてみた例。カーソルにあわせて動いてくれますね！他のオプションもお好みでいじってみてください。