[CSS]これから増えてきそうなMaterial Designにぴったり！気持ちいいアニメーションで表示させるモーダルコンテンツ

ボタンをクリックすると、そのボタンがモーフィングのアニメーションで広がり、モーダルコンテンツを軽快に表示させる実装テクニックを紹介します。

Morphing Modal Window

• デモ
• 実装

デモ

デモは、Chrome, Firefox, Safari, Operaなどのモダンブラウザ、IEは9+でご覧ください。

デモページ

中央の背景グリーンのセクションの「Fire Modal Window」ボタンをクリックすると、モーダルコンテンツがモーフィングのアニメーションで軽快に表示されます。

デモのアニメーションGIF

実装

HTML

デモページの中央のセクション（背景グリーンの箇所）のHTMLです。

<section class="cd-section">

<!-- テキスト -->
 
	<div class="cd-modal-action">
		<a href="#0" class="btn" data-type="modal-trigger">Fire Modal Window</a>
		<span class="cd-modal-bg"></span>
	</div>
 
	<div class="cd-modal">
		<div class="cd-modal-content">
			<!-- モーダルコンテンツ -->
		</div>
	</div>
 
	<a href="#0" class="cd-modal-close">Close</a>
</section>

ボタン、モーダルコンテンツ、クローズボタン、の順番で配置します。

CSS

ユーザーがボタンをクリックすると、.btnがサークル状にモーフィングされ、.cd-modal-bgを背景として広がり、モーダルコンテンツが表示されます。

.cd-modal-action {
  position: relative;
}
.cd-modal-action .btn {
  width: 12.5em;
  height: 4em;
  background-color: #123758;
  border-radius: 5em;
  transition: color 0.2s 0.3s, width 0.3s 0s;
}
.cd-modal-action .btn.to-circle {
  width: 4em;
  color: transparent;
  transition: color 0.2s 0s, width 0.3s 0.2s;
}
.cd-modal-action .cd-modal-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-2em);
  width: 4em;
  height: 4em;
  background-color: #123758;
  border-radius: 50%;
  opacity: 0;
  visibility: hidden;
  transition: visibility 0s 0.5s;
}
.cd-modal-action .cd-modal-bg.is-visible {
  opacity: 1;
  visibility: visible;
}

JavaScript

jQueryを使い、ビューポートのサイズを元にモーダルコンテンツのサイズを設定します。

var btnRadius = $('.cd-modal-bg').width()/2,
	left = $('.cd-modal-bg').offset().left + btnRadius,
	top = $('.cd-modal-bg').offset().top + btnRadius - $(window).scrollTop(),
	scale = scaleValue(top, left, btnRadius, $(window).height(), $(window).width());
 
function scaleValue( topValue, leftValue, radiusValue, windowW, windowH) {
	var maxDistHor = ( leftValue > windowW/2) ? leftValue : (windowW - leftValue),
		maxDistVert = ( topValue > windowH/2) ? topValue : (windowH - topValue);
	return Math.ceil(Math.sqrt( Math.pow(maxDistHor, 2) + Math.pow(maxDistVert, 2) )/radiusValue);
}