「Vanta.js」はThree.jsを使ったWebGLの3Dアニメーションを作成できるJavaScriptライブラリです。
使用方法はとても簡単で、Three.jsとVanta.jsを読み込んで「Vanta.js」サイトのプレビューで設定した値をコピペするだけで設置することができます。
01 Vantaへアクセス、デザインのカスタマイズ
sample1.htmlを開いてください。
次に Vanta.js へアクセスします。
上のような画面が出ます。
カスタマイズするためのパネルが右側にあるので、好きなデザインに変えてみましょう。
「Birds」の場合は色や鳥の数、鳥のサイズ、スペース、スピードなどが調整できます。
02 カスタマイズしたコードをコピー
デザインを変えたら下にある「Grab the code」をコピーします。
赤いラインで囲ってあるところ全部。
03 HTMLファイルへコピー＆ペースト
sample1.html を開き、</body> の上にペーストします。
HTML
<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,
backgroundColor: 0x6fa9ca,
birdSize: 2.00
})
</script>
</body>
04 IDを書き換える
そして #your-element-selector の部分に描画したい要素のIDを書きます。
ここでは「tori」というIDにします。（ID名は好きな名前に変更できます）
HTML
el: "#tori",
05 表示したい場所へ書き込む
CSS
#tori {
display: grid;
place-items: center;
height: 500px;
}
と設定してありますので
html の<body>の下へ<div id="tori"></div> と入れてみましょう。
HTML
<body>
<div id="tori">
<h1>Hello Bird!</h1>
</div>
06 必要なファイルを読み込ませる
動作させるのに必要な2つのファイルを読み込ませます。
JavaScriptファイルをダウンロードして読み込ませるか、用意されているCDNのURLを記述してもOK。
CDNを使う
CDNを使う場合は、カスタマイズパネルに表示されているファイル名を右クリック→「リンクアドレスをコピー」でコピーして貼り付けましょう。
HTML
<script src="three.r134.min.js"></script>
↓
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r134/three.min.js"></script>
HTML
<script src="vanta.birds.min.js"></script>
↓
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script>
07 高さを指定する
初期値だと高さが200になっているので、minHeight の数値を変えましょう。
minHeight: 500.00,
08 Potrfolioの背景を好きなデザインに変更する
ポートフォリオの背景を同じように3Dイメージにしてみます。
sample2.htmlを開いて、今度は好きなデザインを選んで作成してみましょう。
今回はel: "#your-element-selector", → el: "#home", に変更してください。
実際に変更する場合
CSS
style.cssへ入れておきましょう
/* トップページ
------------------------------- */ のところへ入れる
#home {
min-height: 100vh;
}
#home .page-title {
text-transform: none;
}
.home-content {
text-align: center;
padding-top: 20%;
}
.home-content p {
font-size: 1.125rem;
margin: 10px 0 42px;
}
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<script>
VANTA.GLOBE({
el: "#home",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
backgroundColor: 0xca95b7
})
</script>
</body>この上に入れる
09 Landingページの画像を好きなデザインに変更する場合
WEB2-D12で作成したトップ画像を同じように3Dイメージに。
landingpage/index.htmlを開いて、別名で保存してから自由に設定してください。
CSS
#tori {
display: grid;
place-items: center;
height: 500px;
}
今回はel: "#your-element-selector", → el: "#tori", にしています。
ここでは高さをCSSで500pxと指定しています。高さは自由に変更してみてください。
HTML
<main>の下
<img src="images/topimg.jpg" alt="星空">
<div id="tori">
<h1>Hello Bird!</h1>
</div>
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.birds.min.js"></script>
<script>
VANTA.BIRDS({
el: "#tori",
mouseControls: true,
touchControls: true,
gyroControls: false,
minHeight: 200.00,
minWidth: 200.00,
scale: 1.00,
scaleMobile: 1.00,
backgroundColor: 0x6fa9ca,
birdSize: 2.00
})
</script>
</body>の上
このようにして、以前作成した作品「犬の会社」などにも応用して遊んでみましょう。