ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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.

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2