魅力的なアニメーション背景が数行で作れるVanta.js

Vanta.jsは数行のコードを書くだけで「おっ!」と思わせる背景が簡単に作成できるJSライブラリです。
公式サイトにデモが13個用意されています。

目次

サンプルコード

以下はデモサイトのコードを入れて1枚にまとめたものですが、これだけで何かに使えそうな雲の背景が作成できます。

<html>
<head>
<style>
  html, body{
    padding: 0;
    margin: 0;
  }
  #background{
    height: 100vh;
  }
</style>
</head>
<body>
<div id="background"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@0.5.21/dist/vanta.clouds.min.js"></script>
<script>
  VANTA.CLOUDS({
    el: "#background",
    mouseControls: true,
    touchControls: true,
    gyroControls: false,
    minHeight: 200.00,
    minWidth: 200.00,
    cloudShadowColor: 0x7199c0
  })
</script>
</body>
</html>

See the Pen vanta.js - clouds test by hakoirioyaji (@hakoirioyaji) on CodePen.

サイトに組み込めそうか?

デモのパラメーターを色々変更した感じだと、色味で全体的な雰囲気を変えることができるので何かしらサイトに組み込めそうな気はしました。ただ似たり寄ったりになりそうな感じはします。

一応ソースコードのカスタマイズができるか試してみたところ、どうやらシェーディング言語が分からないと手が付けられない感じです。

それでも少しだけ調整してみたかったので、ソースコードのコメントを見てカメラの操作を適当にやってみましたが、やはり基本が分かっていないため思ったようにするまで結構時間が掛かりました。

独自のアニメーションを作れるようになるには根幹に使用されているThree.jsやシェーディング言語を理解する必要がありそうですが、アイデア次第ではパラメーターの調整だけで素敵なサイトが作れるかもしれないです。

  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次