Webアプリケーション化が進んでいく中で、画面遷移にも気を配る必要があります。従来のように全体を読み込み直すのではなく、アプリのように滑らかな画面遷移が求められます。もちろん、そういった動きの中でも履歴管理はきちんとしていなければなりません。 今回紹介するlayerJSは表示部をレイヤーとして構成することで画面遷移やパララックスなどを表現します。

layerJSの使い方

layerJSのデモです。スライダー。

サムネイル化されたコンテンツが表示されるデモ。縮小した時に最後に表示されていたコンテンツがそのまま表示されているのが面白いです。

パララックス。

メニュー。コンテンツが変化してもメニューやヘッダーと言ったレイヤーは残されます。

モーダル。

Webではレイヤーという考えはあまり使われませんが、よくよく考えてみればレイヤー化することで表現力が向上しそうです。レイヤーを差し替えて表示したり、レイヤー単位でアニメーションさせるなど、面白い使い方が考えられるでしょう。

layerJSはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

home layerJS/layerJS: layerJS: Javascript UI composition framework