JS

ネイティブネタ帳

UI

モーダル

タブ

ドロワー

スライダー

スクロール

アコーディオン

目次

ローディングアニメーション

ツールチップ

ヘッダー

テーブル

グラフ

背景

フォーム

フォーム

文字

文字の装飾

文字の操作

文字のカウント

数字の操作

ウィンドウ

ウィンドウ操作

タイトルの操作

ページ遷移時の動き

class

classの操作

要素

要素の操作

要素の追加

API

WP REST API

Google Books APIs

楽天市場API

openBD

画像・動画

画像の操作

YouTube

リンク

Google Analytics

cookie

検索

検索

お気に入り登録

JavaScriptのライブラリVanta.jsでインタラクションな背景アニメーション

お気に入り登録をすると、お気に入り記事一覧に登録することができます。

Vanta.js

JavaScriptのライブラリVanta.jsでインタラクションな背景アニメーション

JavaScriptのライブラリVanta.jsでインタラクションな背景アニメーション

JavaScriptのライブラリ「Vanta.js」は、少し違った背景アニメーションを使う場合にピッタリです。

実装も簡単なので、是非最後までご覧いただけると嬉しいです。

Vanta.js

「Vanta.js」は、簡易なコードで背景アニメーションが実装可能なJavaScriptのライブラリです。

Vanta.js
写真:Vanta.js公式サイト より

「Vanta.js」の特徴とできることは以下の通りです。

  • 簡単に動きのある背景を設定できる
  • ネイティブなJavaScriptライブラリなので、jQuery不要で設置可能
  • 13種類のアニメーション

ただし、Vanta.js」本体にあたる「three.min.js」のファイルサイズが「646KB」と少し大きめです。ので、ページ全体のファイルサイズには気をつけて使うようにしましょう。

かかかず
かかかず

これだけ動くので多少想像はできますが、ファイルサイズは大きめです。

公式サイト Vanta.js

使用方法

使用方法は、以下の通り4つのSTEPで完了します。詳細の各コードは、後述のサンプルであわせてご紹介していくので、ここでは大枠を掴むイメージでご覧ください。

Vanta.js本体の読み込み

はじめに、Vanta.js本体の読み込み設定を行いましょう。使用方法は、<head>〜〜</head>内にいずれかの方法で読み込ませるだけです。

読み込ませる方法は以下の通り、「ダウンロードして使用する場合」か「CDNの場合」のどちらかです。

<!-- ダウンロードして使用する場合 -->
<script src="three.min.js"></script>
<!-- CDNの場合 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
使用したいアニメーションのライブラリを読み込み

次に、使用したいアニメーションのライブラリを読み込みます。

以下の一覧から使用したいライブラリを選び、<head>〜〜</head>内で読み込ませます。

外部リンク vanta CDN files

読み込ませる方法は、STEP.1の本体の読み込みと同様、ダウンロードするかCDNかの好みの方でOKです。

HTMLを記述

HTMLで、設置したい箇所へユニークなid名を付与した要素のコードを記述します。

指定するid名は、後述のVanta.jsのオプションと連動する必要があります。

Vanta.jsのオプションを記述

最後に、Vanta.jsのオプションを記述をして完了です。

コードは <body>〜</body>で、</body> の閉じタグ(クロージングタグ)の前に記述しましょう。

Vanta.jsを使ったサンプル

手順と方法

実際に、「Vanta.js」で作ったサンプルを4つ抜粋してご紹介します。各サンプルのブロックをクリック・タップすると、アニメーションが動くので、試してみてください。

幾何学模様「Net」

幾何学模様で、網状の「Net」です。先進的なWebアプリにマッチしそうな背景アニメーションで、背景の色味を抑えることで文字も立たせやすく使いやすそうな背景です。

タイトル

山路を登りながら、こう考えた。
智に働けば角が立つ。情に棹させば流される。

Vanta.js – Net

<!-- Vanta本体をCDNで読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<!-- Net -->
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.net.min.js"></script>

<!-- レンダリングする要素 -->
<div id="geometryBlock"></div>

<!-- Vantaのオプション -->
<script>
VANTA.NET({
  el: "#geometryBlock",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 500.00,
  minWidth: 200.00,
  scale: 1.00,
  scaleMobile: 1.00,
  color: 0x3f8eff,
  backgroundColor: 0x200d46
})
</script>

雲「clouds」

雲の「Clouds」です。「Vanta.js」では、雲をモチーフにした背景がこれを含め3種類あります。

空の部分か・雲の部分かによって、上に被せる要素の色味を調整すると良い感じです。

タイトル

山路を登りながら、こう考えた。
智に働けば角が立つ。情に棹させば流される。

Vanta.js – Clouds

<!-- Vanta本体をCDNで読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<!-- Clouds -->
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.clouds.min.js"></script>

<!-- レンダリングする要素 -->
<div id="cloudBlock"></div>

<!-- Vantaのオプション -->
<script>
VANTA.CLOUDS({
  el: "#cloudBlock",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 200.00,
  minWidth: 200.00,
  backgroundColor: 0x0,
  skyColor: 0x7eb1,
  speed: 0.50
})
</script>

地球「Globe」

地球の「Globe」です。世界向けのプロダクトや、グローバルなサービスに合いそうです。

タイトル

山路を登りながら、こう考えた。
智に働けば角が立つ。情に棹させば流される。

Vanta.js – Globe

<!-- Vanta本体をCDNで読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<!-- Globe -->
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>

<!-- レンダリングする要素 -->
<div id="globeBlock"></div>

<!-- Vantaのオプション -->
<script>
VANTA.GLOBE({
  el: "#globeBlock",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 500.00,
  minWidth: 200.00,
  scale: 1.00,
  scaleMobile: 1.00,
  color: 0x56ca4,
  size: 1.50,
  backgroundColor: 0x230459
})
</script>

円光「Halo」

円状に光が放射する「Halo」です。テクノっぽい感じの背景ながら、これだけだと主張がかなり強いので疑似要素を使っていろいろ上に被せると良い感じです。

タイトル

山路を登りながら、こう考えた。
智に働けば角が立つ。情に棹させば流される。

Vanta.js – Halo

<!-- Vanta本体をCDNで読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<!-- Halo -->
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.halo.min.js"></script>

<!-- レンダリングする要素 -->
<div id="haloBlock"></div>

<!-- Vantaのオプション -->
<script>
VANTA.HALO({
  el: "#haloBlock",
  mouseControls: true,
  touchControls: true,
  gyroControls: false,
  minHeight: 500.00,
  minWidth: 200.00,
  amplitudeFactor: 1.90,
  size: 0.80
})
</script>

その他のエフェクト

この記事では、実際のサンプルとして4種類をご紹介しましたが、全部で13種類の背景アニメーションを選択することができます。

その他のエフェクト
写真:Vanta.js公式サイト より

公式サイトでは、これらのバリエーションを直接選択して大きさや色もオンライン上で試しながら設定できます。気になった方は以下公式サイトにアクセスして、いろいろ試してみてください。

公式サイト Vanta.js

かかかず
かかかず

特に「Birds」はダイナミックな動きをします。ご覧なってみてください。

さいごに

「Vanta.js」は、背景や要素の色、そしてサイズなど、JavaScriptのオプションで簡単にカスタマイズできるので、少し違ったアニメーションで印象つけたい時に是非使ってみてください。

UI

  • 他のウィンドウが開くことができないポップアップのUIです。

    モーダル

    モーダル

  • 並列な関係を持つ情報を1つずつ格納するUIです。

    タブ

    タブ

  • サイドから全体を覆うほど大きいメニュー表示するUIです。

    ドロワー

    ドロワー

  • 画像などのコンテンツをスライド表示させるUIです。

    スライダー

    スライダー

  • スクロールで表示が変化するスニペットです。

    スクロール

    スクロール

  • クリックすると隠れていた部分が開閉するUIです。

    アコーディオン

    アコーディオン

  • ページのhタグを取得して目次を生成するスニペットです。

    目次

    目次

  • ページの読み込み時にアニメーションをするスニペットです。

    ローディングアニメーション

    ローディングアニメーション

  • マウスオーバーした際に表示される補足説明です。

    ツールチップ

    ツールチップ

  • ページ内上部にあるナビゲーションUIです。

    ヘッダー

    ヘッダー

  • 行と列の組み合わせでできているUIです。

    テーブル

    テーブル

  • データを表やグラフで可視化して見せるUIです。

    グラフ

    グラフ

  • 背景をアニメーションで動かすスニペットです。

    背景

    背景

フォーム

  • ラジオボタン、チェックボックス、ドロップダウンリストなどを通じて、ユーザーが入力できるUIです。

    フォーム

    フォーム

文字

  • 文字列をJavaScriptで装飾・動きをつけるスニペットです。

    文字の装飾

    文字の装飾

  • 文字列の操作をして、置換・変更を行うスニペットです。

    文字の操作

    文字の操作

  • 文字列をカウントして表示などを行うスニペットです。

    文字のカウント

    文字のカウント

  • 数字の要素を取得して、変更するスニペットです。

    数字の操作

    数字の操作

ウィンドウ

classの操作

  • 要素を取得して、classを追加・削除するスニペットです。

    classの操作

    classの操作

要素の操作

API

  • WordPressのAPIを取得して表示するスニペットです。

    WP REST API

    WP REST API

  • Google Books APIsで書籍の情報を表示するスニペットです。

    Google Books APIs

    Google Books APIs

  • 楽天市場のAPIを取得して表示するスニペットです。

    楽天市場API

    楽天市場API

  • openBDのAPIを取得して表示するスニペットです。

    openBD

    openBD

画像・動画

  • 画像を取得して、アニメーションなどの変化を加えるスニペットです。

    画像の操作

    画像の操作

  • YouTubeの動画を表示するスニペットです。

    YouTube

    YouTube

リンク

  • ページ内のリンクを取得して変更・操作するスニペットです。

    リンク

    リンク

  • Google Analyticsとの連携をするスニペットです。

    Google Analytics

    Google Analytics

cookie

  • ブラウザのcookieを利用するスニペットです。

    cookie

    cookie

検索

  • 指定した要素の中から検索を行うスニペットです。

    検索

    検索