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

2022-01-292023-06-08

当ページのリンクには広告が含まれています。

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

Vanta.js

Vanta.js - 3D & WebGL Background Animations For Your Website Gallery of customizable plug & play animated backgrounds using three.js

サンプルコード

以下はデモサイトのコードを入れて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.