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

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アニメーションに見出しを重ねてみた例。カーソルにあわせて動いてくれますね!他のオプションもお好みでいじってみてください。

他のエフェクトもおもしろい!


他にも様々なアニメーションが用意されています。「Birds」と同様にカスタマイズパネルから色やサイズ、動きの調整ができますよ!


Net


Clouds


Halo


いろんなカスタマイズができると思うのでお好みで楽しんでみてください!

シェアする

ニュースレター

Web制作の最新情報やWebクリエイターボックスからのお知らせ、中の人の近況等を定期的にお送りいたします。 ぜひご登録ください!もちろん無料です! :)