福野泰介の一日一創

「vanta-birds」 src on GitHub
ESモジュール化して、拡張タグ化したVanta.jsの第二弾。看板アプリであるvanta.birdsに対応する、vanta-birdsタグができました。コードクリックでコード表示を切り替え、フルスクリーン化もできます。

<script type="module" src="https://code4fukui.github.io/vanta/src/vanta.birds.js"></script> <vanta-birds style="display: block; width: 100vw; height: 100vh;"></vanta-birds> 上記のようにHTML2行で、マウスの動きに反応するかわいい3Dモデルの鳥群が飛びます！

「vanta-birds simple on ss.sabae.cc」
URLでサクッとimportして拡張できるESモジュールとHTMLのカスタム要素、便利ですね。色や鳥の大きさなど、いろいろとカスタマイズできます。（参考、Vanta.js - Animated 3D Backgrounds For Your Website）

links
- カスタム要素の使用 - Web API | MDN