Vanta.js
Vanta.jsはthree.jsを使った3DなWebGLアニメーションの背景を簡単に作成、設置できるライブラリです。
同ライブラリのプロジェクトサイト内で簡単な編集を、プレビューを確認しながらツールバーの調整だけで可能になっており、コードも提供されているのでほぼコピペで実装できます。
提供されるコードはCDNを含んだものも用意されています。
動作サンプルです。よく見かける、マウスに合わせて動くやつ。
上記は以下のようなコードが発行されたものをそのまま実装しています。
<script src="three.r119.min.js"></script>
<script src="vanta.birds.min.js"></script>
<script>
VANTA.BIRDS({
el: "#your-element-selector",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00
})
</script>
スクリプトはCDNに変えました。指定したIDを含んだ空要素を用意すれば完成です。
手軽で良いですね。エフェクトはいろいろ用意されていますのでお好みで。ライブラリはOSSとしてソースコードも公開されています。ライセンスはMIT。
