どんどん簡単になっていく！最近見かけるアニメーションを伴ったさまざまなUIが実装できるスクリプト -LayerJS

アイコンをクリック・タップすると横からスライドして表示されるナビゲーション、サムネイルをタップするとズームして次のコンテンツを表示、今までとは異なるうるさくないパララックスエフェクト、ほかにもスライダーやアコーディオンやモーダルなど。
最近のWebページやスマホアプリでよく見かけるアニメーションを伴ったさまざまなUIが簡単に実装できる超軽量スクリプトを紹介します。

他のスクリプトやスタイルシートに依存はなく、React、VueJS、Angular、jQueryなどと一緒に利用することもできます。

LayerJS
LayerJS -GitHub

• LayerJSの特徴
• LayerJSのデモ
• LayerJSの使い方

LayerJSの特徴

LayerJSは外部ファイルを加え、あとはHTMLにdata属性を与えるだけの簡単実装で、さまざまなUIパターンを簡単に実装できます。

ユニバーサル

スライダー、ポップアップ、アコーディオン、メニュー、パララックス、ジャスチャーなど、さまざまなUIパターンを簡単に実装できます。

ピュアHTML

HTMLのdata属性を使用して、インターフェイスをレイアウトし、インタラクションを定義します。

互換性

React、VueJS、Angular、jQueryに対応しています。

デザイン

デザインを自由に適用できます、LayerJSはエフェクトを提供するだけです。

超軽量

30kbの超軽量スクリプトで、依存はありません。

レスポンシブに完全対応

スマホ・タブレット・デスクトップ、さまざまなデバイス・さまざまなスクリーンサイズに対応。

LayerJSのデモ

LayerJSのデモでは、Webページやスマホアプリでよく見かけるさまざまなレイアウトやエフェクトの最小構成を楽しむことができます。もちろん、これらは組み合わせて利用することができます。

LayerJSの基本的な仕組みは、最初にステージ（親要素・ラッパー）を定義し、その上にコンテンツを配置したレイヤーを載せます。レイヤーはフレームで管理でき、簡単にアニメーションを適用できます。

デモページ: スライダー

スライダーは、親要素にステージを用意し、子要素に各スライドを配置するだけです。コントローラーは通常のリンクとして配置します。
HTMLは、下記のようになります。

デモページ: ズームUI

スマホアプリでよく見かけるズーズUIも簡単に実装できます。ステージ上にキャンバスを用意し、拡大縮小・回転・移動・変形させることができます。

デモページ: パララックス

パララックスは、ステージ上に2つレイヤーを重ねて実装します。上層と下層に異なる動きを与えることで、簡単に実現できます。

デモページ: サイドメニュー

サイドから重なるように表示されるメニューも簡単に実装できます。閉じた状態と開いた状態のフレームを用意し、切り替えるだけです。

デモページ: ライトボックス・モーダル

ライトボックス・モーダルのようなポップアップコンテンツも簡単です。表示しない状態と表示した状態のフレームを作成し、そのレイヤーを切り替えるだけです。

LayerJSの使い方

Step 1: 外部ファイル

head内に当スクリプト・スタイルシートを外部ファイルとして記述します。

Step 2: HTML

div要素にdata属性を加え、ステージやフレームを定義するだけです。

さまざまなdata属性が用意されています。

• LayerJSのdata属性一覧