スマートフォン向けのWebサイトなどでは画面遷移が大事です。普通のURLを遷移するような動きではUXがよくありません。新しいコンテンツがスライドしてきたり、前の画面と滑らかに入れ替わることでユーザの意識を切らさずに操作を継続できるようになります。 そうした動きをサポートしてくれるライブラリがsmoothState.jsです。履歴管理も行ってくれるライブラリです。

smoothState.jsの使い方

デモです。クリック時にコンテンツがスムーズに表示されます。

アニメーションのされ方も複数あります。

メニューで使うパターンです。

smoothState.jsを使うと画面遷移はもちろん、履歴管理も行ってくれます。スマートフォンはもちろんデスクトップブラウザでも利用できるでしょう。多くのフレームワークでは同様の機能がありますが、大げさになってしまいます。遷移機能だけ欲しい時に良さそうです。

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

Home — Sidebar Demo miguel-perez/smoothState.js: Unobtrusive page transitions with jQuery.