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

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

Morphing Modal Window

• デモ
• 実装

デモ

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

デモページ

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

デモのアニメーションGIF

実装

HTML

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

[html]

[/html]

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

CSS

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

[css]
.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;
}
[/css]

JavaScript

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

[javascript]
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);
}
[/javascript]