Webページは一般的にリンクをクリックするとURLが変わってページ全体が再読み込みされます。ページのローディングも時間がかかりますし、ユーザビリティとしてイケてるとは言いがたいでしょう。 そこで使ってみたいのがBarba.jsです。URLをクリックした時のページ遷移をアニメーションをまじえつつ行ってくれます。

Barba.jsの使い方

デモです。クリックすると写真が拡大されます。これはすべて別なHTMLです。

こちらはスライド的なページ遷移です。スマートフォンアプリの画面遷移に近いかも知れません。

さらにアイコンにしたパターン。ページを遷移する際には一旦ページの一番上にスクロールしてからコンテンツが表示されます。

Barba.jsはSPA（シングルページアプリケーション）を構築する際に使えそうなソフトウェアです。一つのHTMLで管理しているとメンテナンスが大変になりますのでBarba.jsを使ってつなぎ合わせるのが良さそうです。

Barba.jsはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

Barba.js luruke/barba.js: Create badass, fluid and smooth transition between your website’s pages.