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

スマートフォンのWebビューは従来に比べると遙かに進化していて、レンダリング速度やJavaScriptの実行速度も高速化しています。そんな中、ネイティブアプリとWebアプリの違いと言えば、画面遷移のアニメーションにあるのではないでしょうか。

上下左右から画面がスライドして表示されるのはやはりアプリならではといった感があります。そんな表示をサポートしてくれるWebアプリ用ライブラリがNavstack.jsです。

Navstack.jsの使い方

使い方としてはまず、ステージを作ります。

stage = new Navstack({
  el: $('#stage')
});

後はページ遷移をする度にpushしていくだけです。

// Navigate to new pages using push.
stage.push('/home', function() {
  return $("<div class='full-screen'>This is the home screen</div>");
});

// The first parameter is an ID for the pane to be pushed.
// This will animate the stage to slide into the new view.
stage.push('/task/1', function() {
  return $("<div class='full-screen'>Task #1 details: ...</div>");
});

hashchangeを使って画面遷移を行うのが良さそうです。ここではjQueryを使っていますが、BackboneのViewやRactive、React.jsのコンポーネントにも対応しています。

こちらがデモです。ぬるぬると動いてWebとは思えないほどです。
こちらがデモです。ぬるぬると動いてWebとは思えないほどです。

Navstack.jsは画面遷移だけを切り出したライブラリになりますので、既存のフレームワークやライブラリとの親和性も高いのが特徴です。ハイブリッドアプリやスマートフォン向けのWebサイト開発時に役立つライブラリでしょう。

Navstack.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

ricostacruz.com/navstack/

rstacruz/navstack

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2