Vanta.js 3D背景アニメーション JSライブラリ 使用方法・オプションを解説 実装有 既にテーマがあり簡単！

2021.09.07

先日、背景アニメーションを実装するJSライブラリを2つ紹介しました。

下記2つは二次元でアニメーションするものでしたが、今回は3次元でアニメーションするJSライブラリ Vanta.js について調査し、CODEPENで実装してみましたのでご紹介いたします。

particles.js 背景アニメーションJSライブラリ 使用方法・オプション・デフォルト解説 実装有 実装は簡単！
先日、背景アニメーションbubbly-bg.jsを紹介しましたので、 同類のjsライブラリparticles.jsご紹介。 簡単に実装できます。 オプションのデフォルト値も解説した上で、実際にCODEPENで実装しています。
b-moon.net
2021.09.05
bubbly-bg.js JSライブラリ 使用方法・オプション・canvas指定・角度を解説 雪降るイメージ実装あり
簡単に美しい泡のアニメーションを実装してくれるjQuery非依存のライブラリ。 オプションで悩むことはほとんどありませんが、オプションを調査し、あわせて実際にCODEPENで雪降るイメージを作成。canvas指定・角度も解説。
b-moon.net
2021.08.31
cloud_background_animation
上のイメージが3Dで動きます

Vanta.jsとは

3DのJSライブラリthree.jsを利用し、3Dの背景アニメーションを実装するJSライブラリです。
jQuery非依存ですが、three.jsの読み込みは必須です。

公式デモページでテーマを選択後、カスタマイズすることで、簡単に実装できてしまいます。
しかも、一部のテーマはマウスの動きにも反応します。

以下が公式ページになります。

GitHub

公式デモページ

テーマ

事前に定義されたテーマが複数用意されています。

個人的な薦めは、「Birds」「Fog」「Waves」「Clouds」です。
他のものは個性が強いため、導入可能なWEBサイトが限られるような気がします。

以下の表で各テーマを言葉で説明していますが、公式ページをご覧いただく方が手っ取り早いかと思います。

テーマ説明
Birds多数の鳥が群れを成して飛んでいる
Fogモヤモヤ動く霧
Waves多数の三角形でできた幾何学的模様が波打つ
Clouds動く雲の上
Clouds2動く雲の上に扇型太目の線の模様が入っている
Globe回る地球儀
Net無数の点とそれを結ぶ線が不規則なネットとなって、自由に動く
Cells無数の細胞が動く
Trunk少し波打つ円系の線が、大きさを変えてドーナツ状に重なり、年輪のようになってもやもや動く
Topology無数のゆるーい曲線が、不規則な間隔で太さが変化
Dots規則的に並ぶドットが波打ち、その上に針を刺したような球体が回転
Rings無数のカラフルで太さの異なる線が円形に回転
Halo一つの円からカラフルな後光？オーラ？が発生させていて幻想的

使い方

CDNでJSファイルを読み込みます。
各テーマによって読み込むvanta.jsファイルが異なりますので、必要なもののみ読み込んでください。

<bpdy>
  <div id="your-element-selector"></div>

  <!-- three.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>

  <!-- vanta.jsのテーマbirdsの場合 -->
  <script src="https://cdn.jsdelivr.net/npm/vanta@0.5.21/dist/vanta.birds.min.js"></script>
  <!-- vanta.jsのテーマfogの場合 -->
  <script src="https://cdn.jsdelivr.net/npm/vanta@0.5.21/dist/vanta.fog.min.js"></script>
  <!-- vanta.jsのテーマwavesの場合 -->
  <script src="https://cdn.jsdelivr.net/npm/vanta@0.5.21/dist/vanta.waves.min.js"></script>
  <!-- vanta.jsのテーマcloudsの場合 -->
  <script src="https://cdn.jsdelivr.net/npm/vanta@0.5.21/dist/vanta.clouds.min.js"></script>
  <!-- vanta.jsのテーマclouds2の場合 -->
  <script src="https://cdn.jsdelivr.net/npm/vanta@0.5.21/dist/vanta.clouds2.min.js"></script>
  <!-- vanta.jsのテーマglobeの場合 -->
  <script src="https://cdn.jsdelivr.net/npm/vanta@0.5.21/dist/vanta.globe.min.js"></script>
  <!-- vanta.jsのテーマnetの場合 -->
  <script src="https://cdn.jsdelivr.net/npm/vanta@0.5.21/dist/vanta.net.min.js"></script>
  <!-- vanta.jsのテーマcellsの場合 -->
  <script src="https://cdn.jsdelivr.net/npm/vanta@0.5.21/dist/vanta.cells.min.js"></script>
  <!-- vanta.jsのテーマtrunkの場合 -->
  <script src="https://cdn.jsdelivr.net/npm/vanta@0.5.21/dist/vanta.trunk.min.js"></script>
  <!-- vanta.jsのテーマtopologyの場合 -->
  <script src="https://cdn.jsdelivr.net/npm/vanta@0.5.21/dist/vanta.topology.min.js"></script>
  <!-- vanta.jsのテーマdotsの場合 -->
  <script src="https://cdn.jsdelivr.net/npm/vanta@0.5.21/dist/vanta.dots.min.js"></script>
  <!-- vanta.jsのテーマringsの場合 -->
  <script src="https://cdn.jsdelivr.net/npm/vanta@0.5.21/dist/vanta.rings.min.js"></script>
  <!-- vanta.jsのテーマhaloの場合 -->
  <script src="https://cdn.jsdelivr.net/npm/vanta@0.5.21/dist/vanta.halo.min.js"></script>

  <!-- ご自身のJSファイルのパスに変更 -->
  <script src="main.js"></script>

</body>

オプション

各テーマ固有のオプションやデフォルト値がありますが、ベースとなる（共通する）ものは下記の通りです。

オプションデフォルト説明
mouseControlstrueテーマによって異なるが、視点を変えたり、図形がカーソルが離れる。
特定のテーマにのみ適用される。
touchControlstrueテーマによって異なるが、視点を変えたり、図形がカーソルが離れる。
特定のテーマにのみ適用される。
gyroControlsfalse回転させるか？特定のテーマにのみ適用される。
minHeight200heightの指定も可能です。
minWidth200widthの指定も可能です。
scale1テーマによって異なる。
scaleMobile1テーマによって異なる。
すべてのテーマがモバイルデバイスで機能するわけではないようです。

オプションによるカスタマイズ方法

公式デモページよりテーマを選択後、右側の「1.Customize 及び 2.Grab the code」パネルで色・サイズ・スピード等をカスタマイズしてください。
パネル下方にスクリプトが表示されますので、それをJSファイルにコピペすればOKです。

右側にパネルが表示されていない場合は、右上の「歯車 Customize & Get Code」をクリックするとパネルが開きます。

【参考】テーマcloudのデフォルトオプション

VANTA.CLOUDS({  // VANTAの後に続くのがテーマ名
  backgroundColor: 0xffffff,
  skyColor: 0x68b8d7,
  cloudColor: 0xadc1de,
  cloudShadowColor: 0x183550,
  sunColor: 0xff9919,
  sunGlareColor: 0xff6633,
  sunlightColor: 0xff9933,
  scale: 3,
  scaleMobile: 12,
  speed: 1,
  mouseEase: true,
})

アニメーションが描画される背景要素の子要素について注意点

アニメーションを描画する背景を指定すると、その子要素にcanvasタグが自動生成され、canvas内にアニメーションが描画されます。

このとき、背景に指定した要素の子要素は、canvas内から追いやられてしまします（これは、先に紹介したparticles.js と同様です）。

なぜなら、canvasに描画されるアニメーションはそのタグ内の子要素までも上書きし、子要素が消えてしまうのを防ぐための処理と考えられます。
そのため、一応、子要素にはpositionプロパティやz-indexプロパティが自動で付与され、背景の前面に配置されるように処理されます（とても親切です）。

但し、子要素にmargin等を設定（又はブラウザの既定の設定のままに）していると、意図しない配置になっていたりするため、HTMLファイルをプレビューした後は、子要素の位置を微調整する必要があるかもしれません。

オプションを変更しCODEPENで実装（朝焼けの雲の上）

「Run Pen」をクリックしてください。

CODEPENのResult画面の適当な場所にマウスカーソルを乗せてみると、視点が変更になるのが分かると思います。

See the Pen vanta_clouds by blue moon (@blue-moon) on CodePen.

HTMLファイル

<body>
  <div id="my-background">
    <p>clouds</p>
  </div>

  <!-- three.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
  <!-- vanta.jsのテーマclouds-->
  <script src="https://cdn.jsdelivr.net/npm/vanta@0.5.21/dist/vanta.clouds.min.js"></script>
  <!-- ご自身のパスに変更 -->
  <script src="main.js"></script>

</body>

補足説明

因みに、アニメーションが描画された後に出力されたHTMLの一部を、下記に抜粋しています。

width: ●●●px; height: ●●●px; は、画面の大きさやオプションで minHeight や minWidth を指定していると、画面サイズ変更時に自動で調整され上書きされます。

<!-- ここより上は省略 -->
<div id="my-background" style="position: relative;">
  <span style="position: relative; z-index: 1;"></span> <!-- spanタグも自動付与 -->
  <p style="position: relative; z-index: 1;">clouds</p> <!-- canvasタグから外れ、自動でstyleが付与されている -->
  <span style="position: relative; z-index: 1;"></span>
  <canvas class="vanta-canvas" style="position: absolute; z-index: 0; top: 0px; left: 0px; width: ●●●px; height: ●●●px;" width="75" height="50"></canvas>
</div>
<!-- ここより下は省略 -->

CSSファイル

特別なことはしていないです。

body {
  margin: 0;
}

p {
  margin: 0;
  padding-top: 1.5em;
  text-align: center;
  letter-spacing: 0.1em;
}

JSファイル

公式ページから生成したコードをコピペし、el（アニメーションを描画する要素） と minHeight を変更したのみです。

VANTA.CLOUDS({
  el: "#my-background",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 300.00,
  minWidth: 200.00,
  skyColor: 0xded3ff,
  cloudColor: 0x6f9fff,
  cloudShadowColor: 0xff7b7b,
  sunColor: 0xff2b2b,
  sunGlareColor: 0xff6238,
  sunlightColor: 0xfcfcfc
})

オプションを変更しCODEPENで実装（幻想的？妖艶？な霧）

このテーマは、マウスの動きには反応しないようです。

See the Pen vanta.js_fog by blue moon (@blue-moon) on CodePen.

HTMLファイル

<body>
  <div id="my-background">
    <p>fog</p>
  </div>

  <!-- three.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
  <!-- vanta.jsのテーマfog-->
  <script src="https://cdn.jsdelivr.net/npm/vanta@0.5.21/dist/vanta.fog.min.js"></script>
  <!-- ご自身のパスに変更 -->
  <script src="main.js"></script>

</body>

CSSファイル

上記のcloudテーマと同じのため、割愛しています。

JSファイル

VANTA.FOG({
  el: "#my-background",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 450.00,
  minWidth: 200.00,
  highlightColor: 0xc51aff,
  midtoneColor: 0xff2e2e,
  lowlightColor: 0x56baff,
  baseColor: 0xfaf1ff,
  blurFactor: 0.59,
  speed: 1.30,
  zoom: 0.80
})

最後に

途中から出てきたcanvasタグって何？と思われた方は、bubbly-bg.jsでも触れていますが、ざっくり説明すると以下のようなタグです。

HTML5から追加された図形描写の技術仕様Canvasと、JavaScriptを組み合わせて図形を描画します。
そして、getContextメソッドにより描画機能を有効にします。
スクリプトで図形を描写することにより、画像と比べてデータ量が軽量になります。

短いコードで3D背景アニメーションが実装できるなんて、素晴らしいJSライブラリです。
WEBサイトを訪問したユーザーを惹きつけてくれるに違いありません。

しかも、Vanta.js自体のファイルは軽く、ほとんどはthree.jsであり、それでも軽量だそうです。
個人的にお薦めのJSライブラリ（特にcloudsとfogのテーマ）になりました。

タイトルとURLをコピーしました