Installation

更新日: 2018-06-14

インストール

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]


© 2016 Luigi De Rosa Released under the MIT license

このコンテンツはLuigi De Rosa(luruke)によるBarbaドキュメントを翻訳/改変したものです。