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

最近のWebページで人気があるのは、ビジュアルの連続性。
パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで表示される超軽量(1.2KB)スクリプトを紹介します。

サイトのキャプチャ

cta.js
cta.js -GitHub

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
});

sponsors

top of page

©2018 coliss