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>npm/yarnを利用する場合
プロジェクトにインストールするには、以下のコマンドを実行します。
# npmの場合
npm install blendy
# yarnの場合
yarn add blendyインストール後、JavaScriptファイルでblendyをインポートします。
import Blendy from 'blendy';基本的な使い方
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>ポイント： 遷移をスムーズに見せるため、遷移元と遷移先の要素内のコンテンツは、それぞれ単一のコンテナ要素（例：<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';
});
});blendy.toggle('modal-1')でモーダルが開き、blendy.untoggle('modal-1')で閉じます。untoggleの第二引数には、アニメーション完了後に実行されるコールバック関数を指定できます。
オプションでアニメーションをカスタマイズ
createBlendyの引数にオブジェクトを渡すことで、アニメーションの質感を変更できます。
const blendy = Blendy.createBlendy({
animation: 'spring' // 'dynamic' (デフォルト) または 'spring'
});'dynamic': キュービックベジェのような、なめらかなイーズアウト効果。'spring': バネのような弾む動き。
応用的な使い方
動的に追加された要素への対応
Ajaxなどで後からページに追加された要素をBlendyの対象にしたい場合は、blendy.update()メソッドを呼び出す必要があります。
// 新しい要素をDOMに追加した後
blendy.update();これにより、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;
}まとめ
Blendyは、シンプルながらも非常に効果的なモーダル遷移を実装できる、優れたライブラリです。
- 軽量でフレームワーク非依存
- 直感的な
data属性による簡単な実装 - 選べるアニメーションの質感
Webサイトのユーザー体験をもう一段階向上させたいときに、ぜひ活用してみてはいかがでしょうか。
