注目キーワード
  1. Wordpress
  2. テーマ
  3. プラグイン
  4. SEO
  5. 集客

three.jsを使った3Dなアニメーション背景を簡単に作成、設置できるライブラリ・「Vanta.js」


目次

Vanta.js


Vanta.jsはthree.jsを使った3DなWebGLアニメーションの背景を簡単に作成、設置できるライブラリです。

同ライブラリのプロジェクトサイト内で簡単な編集を、プレビューを確認しながらツールバーの調整だけで可能になっており、コードも提供されているのでほぼコピペで実装できます。

提供されるコードはCDNを含んだものも用意されています。

Ads

動作サンプルです。よく見かける、マウスに合わせて動くやつ。

上記は以下のようなコードが発行されたものをそのまま実装しています。

<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。

Vanta.jsGithub

#wordpress #ワードプレス #SEO #集客

「かちびと.net」を閲覧する

最新情報をチェックしよう!
>WordPressに関連する情報まとめ

WordPressに関連する情報まとめ

ブログ / ホームページの価値の最大化をさせるCMS、WordPress(ワードプレス)。フリーのブログとは違い、いくらか敷居の高い印象がありますが、一つ一つクリアにしてみるときっとあなたもWordPressのパワーの恩恵に預かれると思います。当サイトを見て、まずはトライしてみましょう!

CTR IMG