[JS]ボタンがパネルに、パネルがモーダルウインドウにアニメーションで変形する超軽量スクリプト -cta.js

サイト構築 -JavaScript

Post on:2015年4月21日

cta.jsのデモ

デモではユーザーのアクションに応じて、アニメーションを伴ったさまざまなコンテンツを表示します。

デモページ

デモのいくつかをアニメーションGIFにしてみました。

タイル状コンテンツのデモ

タイル状に配置された各コンテンツをクリックすると、それぞれのパネルがフルサイズで表示されます。

モーダルウインドウとサイドバーのデモ

コマを落としているので分かりにくいですが、ボタンをクリックするとモーダルウインドウやサイドバーに、アニメーションで変形して表示されます。

cta.jsの使い方

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<body>
  ...
  コンテンツ
  ...
  <script src="src/cta.js"></script>
</body>

Step 2: HTML

一つ目のデモ「タイル状コンテンツ」のHTMLは、こんな感じです。
data属性を使い、アニメーションで変更する要素を指定します。

<div class="tile-container">
  <div class="tile" data-cta-target=".js-modal-1"></div>
  <div class="tile" data-cta-target=".js-modal-2"></div>
  <div class="tile" data-cta-target=".js-modal-3"></div>
  <div class="tile" data-cta-target=".js-modal-4"></div>
  <div class="tile" data-cta-target=".js-modal-5"></div>
  <div class="tile" data-cta-target=".js-modal-3"></div>
  <div class="tile" data-cta-target=".js-modal-5"></div>
</div>

表示するモーダルウインドウも用意しておきます。

<div class="js-modal-3">
  モーダルウインドウ
/div>

Step 3: JavaScript

アニメーションの設定をし、スクリプトを実行します。
スクリプトの基本形：元の要素（X）から変更する要素（Y）にアニメ化できます。

var e1 = document.querySelector(X),
    e2 = document.querySelector(Y);
cta(e1, e2);

タイミングなども設定できます。

var e1 = document.querySelector('#js-source-element'),
    e2 = document.querySelector('#js-target-element');
cta(e1, e2, {
    duration: 0.3 // seconds
});