最近のwebサイトはアニメーションや動画などを使いリッチな動きを使ったものが増えてきています。
今回はWebページの背景としてアニメーションを簡単に作成できる「Vanta.js」を紹介していきたいと思います。
Vanta.jsとは
「Vanta.js」はThree.jsを使って3Dアニメーションを簡単に作成することができるJavaScriptライブラリになります。
3Dエフェクトの種類は下記の13種類あります。
3Dエフェクトの種類
- birds
- fog
- waves
- clouds
- clouds2
- globe
- net
- cells
- trunk
- topology
- dots
- rings
- halo
カスタマイズ
色や背景色から「ポイント」、「距離」、「間隔」など細かい設定もすることができます。
はじめに「More Effects」で3Dエフェクトを選んでカスタマイズで設定したら下にあるソースをコピーしてwebサイトに追加しましょう。
手軽で簡単にリッチな3Dサイトが作れちゃいますね。
コメント