Vanta.jsで面白い視覚効果

2022年5月23日

Venta.jsを発見

面白いものを見つけてしまいました。
https://www.vantajs.com/?effect=birds

早速使ってみる

一体どういう仕組で動いてるんでしょこれ。
Three.js関連っぽいんですがまだ詳細はつかめていません。
ですが、これを使って遊んでいるうちに何かもっと面白いものを見つけられる気がします。

使い方

公式Githubにアクセスして
https://github.com/tengbao/vanta/tree/master/dist
必要なものをダウンロードしてきます。

必要なもの

・vanta-master/gallery/jquery.js
・vanta-master/vendor/three.r119.min.js
・vanta-master/dist/vanta.birds.min.js

これだけあれば動きます。jQueryを使っているんですね。

あとは公式ページに書いてあるとおり

<script> 
  VANTA.BIRDS({ 
  el: "<strong>#your-element-selector</strong>", 
  mouseControls: true, 
  touchControls: true, 
  gyroControls: false, 
  minHeight: 200.00, 
  minWidth: 200.00, 
  scale: 1.00, scaleMobile: 1.00 
}) 
<script>

と記述しておけば動作します。
#your-element-selectorの部分に動作させたい対象のidやclassを記述します。

動作させてみました。
https://bistro.site/demo/venta/venta.html

Related Posts

JavaScriptJavaScript, jQuery, Venta.js

Posted by bistro