JavaScript スムーズな遷移アニメーションが実装できるモーダル「Blendy」の使い方

Webサイトにモーダルウィンドウを実装する際、ただ表示させるだけでなく、UIの遷移にもこだわりたいものです。今回は、ある要素から別の要素へ、まるで変形するようにスムーズな遷移アニメーションを実装できるJavaScriptライブラリ「Blendy」をご紹介します。

この記事では、Blendyの基本的な使い方から、アニメーションのカスタマイズ、応用的な使い方まで、具体的なコードを交えて詳しく解説します。

Blendyとは？

Blendyは、特定のフレームワークに依存しない、軽量なJavaScriptライブラリです。data-blendy-fromとdata-blendy-toという2つのカスタムデータ属性を使うだけで、驚くほど簡単にスムーズなモーダル遷移を実装できます。

導入方法

Blendyは、CDNまたはnpm/yarnを通じて簡単に導入できます。

CDNを利用する場合

HTMLファイルの<head>タグ内に、以下のスクリプトを追加します。

<script src="https://unpkg.com/blendy@latest/dist/blendy.min.js"></script>
HTML

npm/yarnを利用する場合

プロジェクトにインストールするには、以下のコマンドを実行します。

# npmの場合npm install blendy# yarnの場合yarn add blendy
PowerShell

インストール後、JavaScriptファイルでblendyをインポートします。

import Blendy from 'blendy';
JavaScript

基本的な使い方

Blendyの基本的な実装は、HTMLとJavaScriptのわずかな記述で完了します。

1. HTMLの準備

まず、遷移元となる要素（例：ボタン）と、遷移先となるモーダル要素を準備します。重要なのは、data-blendy-fromとdata-blendy-toに同じ値を指定し、両者を紐付けることです。

<!-- 遷移元のボタン --><button data-blendy-from="modal-1"> <span>詳細を見る</span></button><!-- 遷移先のモーダル --><div class="modal-content" data-blendy-to="modal-1"> <h2>モーダルのタイトル</h2> <p>ここにモーダルのコンテンツが入ります。</p> <button class="close-button">閉じる</button></div>
HTML

ポイント： 遷移をスムーズに見せるため、遷移元と遷移先の要素内のコンテンツは、それぞれ単一のコンテナ要素（例：<div>や<span>）で囲むことが推奨されています。

2. JavaScriptの実装

次に、Blendyのインスタンスを作成し、クリックイベントでアニメーションを制御します。

// Blendyのインスタンスを作成const blendy = Blendy.createBlendy();// 遷移元のボタンと閉じるボタンを取得const openButton = document.querySelector('[data-blendy-from="modal-1"]');const closeButton = document.querySelector('.close-button');const modal = document.querySelector('[data-blendy-to="modal-1"]');// ボタンクリックでモーダルを開くopenButton.addEventListener('click', () => { modal.style.display = 'block'; // 先に表示状態にする blendy.toggle('modal-1');});// 閉じるボタンでモーダルを閉じるcloseButton.addEventListener('click', () => { blendy.untoggle('modal-1', () => { // アニメーション完了後に非表示にする modal.style.display = 'none'; });});
JavaScript

blendy.toggle('modal-1')でモーダルが開き、blendy.untoggle('modal-1')で閉じます。untoggleの第二引数には、アニメーション完了後に実行されるコールバック関数を指定できます。

オプションでアニメーションをカスタマイズ

createBlendyの引数にオブジェクトを渡すことで、アニメーションの質感を変更できます。

const blendy = Blendy.createBlendy({ animation: 'spring' // 'dynamic' (デフォルト) または 'spring'});
JavaScript
  • 'dynamic': キュービックベジェのような、なめらかなイーズアウト効果。
  • 'spring': バネのような弾む動き。

応用的な使い方

動的に追加された要素への対応

Ajaxなどで後からページに追加された要素をBlendyの対象にしたい場合は、blendy.update()メソッドを呼び出す必要があります。

// 新しい要素をDOMに追加した後blendy.update();
JavaScript

これにより、Blendyは新しい要素を認識し、アニメーションの対象に含めることができます。

スタイリングについて

Blendyは、あくまで要素間の遷移アニメーションを担うライブラリです。モーダルの背景色、コンテンツのレイアウト、閉じるボタンのデザインといった見た目に関する部分は、すべて自分でCSSを記述する必要があります。

/* モーダルのスタイルの例 */.modal-content { display: none; /* 初期状態では非表示 */ position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 2em; background-color: white; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); z-index: 1000;}
CSS

まとめ

Blendyは、シンプルながらも非常に効果的なモーダル遷移を実装できる、優れたライブラリです。

  • 軽量でフレームワーク非依存
  • 直感的なdata属性による簡単な実装
  • 選べるアニメーションの質感

Webサイトのユーザー体験をもう一段階向上させたいときに、ぜひ活用してみてはいかがでしょうか。

read next