[JS]非常に高速でシームレスなページ遷移を実現する超軽量のスクリプト -Barba.js
Post on:2016年6月30日
sponsors
Webサイトを見ていてページを遷移する時に、読み込みがやたら速いサイトに出会ったことはありませんか？
PJAXを使い、通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加えることで、非常に高速でシームレスなページ遷移を実現する超軽量(4kb gzip)のスクリプトを紹介します。
Barba.jsのデモ
Barba.jsはすでに実際のサイトにも利用されており、Webデザイナーの間でも話題になっているサイトもあります。
ページを移動しているにも関わらず、まるでスライダーやパネルを切り換えている感覚で遷移します。
ページの移動時に、スクリプトが利用されています。
ページの移動時に、まるでスライダーのように表示されます。
シンプルなデモも用意されています。
グリッドに配置された各パネルをクリックすると、全面に拡大されます。
ページ遷移時、スライダーのように遷移されます。
サークル状のエレメントが広がりながら遷移します。
Barba.jsの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 2 3 4 5 6 |
<body> ... コンテンツ ... <script src="barba.min.js" type="text/javascript"></script> </body> |
JSファイルは、CDNでも配布されています。
|
1 2 3 4 5 6 |
<body> ... コンテンツ ... <script src="https://cdnjs.cloudflare.com/ajax/libs/barba.js/0.1.0/barba.min.js" type="text/javascript"></script> </body> |
Step 2: HTML
通常のHTMLに、スクリプトを適用する要素にclassを与えます。
|
1 2 3 4 5 |
<div id="barba-wrapper"> <div class="barba-container"> ...Put here the content you wish to change between pages... </div> </div> |
#barba-wrapperはラッパー用、.barba-containerはコンテナ用です。
Step 3: JavaScript
スクリプトを初期化して、実行します。
|
1 |
Barba.Pjax.start(); |
エフェクトやイベントの実装方法は、下記ページをご覧ください。
sponsors
