[JS]非常に高速でシームレスなページ遷移を実現する超軽量のスクリプト -Barba.js

Webサイトを見ていてページを遷移する時に、読み込みがやたら速いサイトに出会ったことはありませんか?

PJAXを使い、通常のリンクのアクションによるハードリフレッシュをなくし、HTTPリクエストと描画を最小限に抑え、更にエフェクトを加えることで、非常に高速でシームレスなページ遷移を実現する超軽量(4kb gzip)のスクリプトを紹介します。

サイトのキャプチャ

Barba.js
Barba.js -GitHub

Barba.jsのデモ

Barba.jsはすでに実際のサイトにも利用されており、Webデザイナーの間でも話題になっているサイトもあります。
ページを移動しているにも関わらず、まるでスライダーやパネルを切り換えている感覚で遷移します。

サイトのアニメーション

Poignée de main virile

ページの移動時に、スクリプトが利用されています。

サイトのアニメーション

Budi dio koji nedostaje

ページの移動時に、まるでスライダーのように表示されます。

シンプルなデモも用意されています。

デモのキャプチャ

デモページ

グリッドに配置された各パネルをクリックすると、全面に拡大されます。

デモのキャプチャ

デモページ

ページ遷移時、スライダーのように遷移されます。

デモのキャプチャ

デモページ

サークル状のエレメントが広がりながら遷移します。

Barba.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

JSファイルは、CDNでも配布されています。

Step 2: HTML

通常のHTMLに、スクリプトを適用する要素にclassを与えます。

#barba-wrapperはラッパー用、.barba-containerはコンテナ用です。

Step 3: JavaScript

スクリプトを初期化して、実行します。

エフェクトやイベントの実装方法は、下記ページをご覧ください。

top of page

©2017 coliss