[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js
Post on:2015年4月21日
sponsorsr
最近のWebページで人気があるのは、ビジュアルの連続性。
パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで表示される超軽量（1.2KB）スクリプトを紹介します。
cta.jsのデモ
デモではユーザーのアクションに応じて、アニメーションを伴ったさまざまなコンテンツを表示します。
デモのいくつかをアニメーションGIFにしてみました。
タイル状コンテンツのデモ
タイル状に配置された各コンテンツをクリックすると、それぞれのパネルがフルサイズで表示されます。
モーダルウインドウとサイドバーのデモ
コマを落としているので分かりにくいですが、ボタンをクリックするとモーダルウインドウやサイドバーに、アニメーションで変形して表示されます。
cta.jsの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
[html]
...
コンテンツ
...
[/html]
Step 2: HTML
一つ目のデモ「タイル状コンテンツ」のHTMLは、こんな感じです。
data属性を使い、アニメーションで変更する要素を指定します。
[html]
[/html]
表示するモーダルウインドウも用意しておきます。
[html]
/div>
[/html]
Step 3: JavaScript
アニメーションの設定をし、スクリプトを実行します。
スクリプトの基本形：元の要素（X）から変更する要素（Y）にアニメ化できます。
[javascript]
var e1 = document.querySelector(X),
e2 = document.querySelector(Y);
cta(e1, e2);
[/javascript]
タイミングなども設定できます。
[javascript]
var e1 = document.querySelector('#js-source-element'),
e2 = document.querySelector('#js-target-element');
cta(e1, e2, {
duration: 0.3 // seconds
});
[/javascript]
sponsors
