Installation

インストール

barba.jsはAMD、CommonJS、ブラウザで使うことができます。 (UMDを使って)

npmを使ったインストールは以下になります。

$ npm install barba.js --save-dev

または、ページ内で直接呼び出すだけです。

<script src="barba.min.js" type="text/javascript"></script>

barba.jsを使う上でDOM構造について少し知っておく必要があります。 基本的にページ構造を以下の構造を以下のようにします。

<div id="barba-wrapper">
  <div class="barba-container">
    ...ここにページ遷移時に変更したいコンテンツを設置します。
  </div>
</div>

メモ：対象のセレクタ(#barba-wrapper、.barba-container)は 簡単に変更することができます。 詳しくはDomAPIを参照してください。

barba.jsを読み込んだら初期化する必要があります。

// DOMが読み込み済みでなければなりません。
Barba.Pjax.start();

[デモ - Basic]