Модальное окно с эффектом морфинга на jQuery

Кнопка вызова к действию, которая анимируется и превращается в полноразмерное модальное окно.

 

ДЕМО

ИСХОДНИКИ

 

Модальные окна используются для отображения связанного контента, временно скрывая основное содержимое. Если представить нашу веб-страницу в виде слоев, распределенных вдоль оси z, то модальные окна находятся сверху.

С помощью этого саморожденья мы хотели ускорить способ, которым мы запускаем модальное окно: кнопка, которая активирует действие, анимирует и превращается в новую страницу полной ширины. Мы попробовали что-то подобное с уроком быстрого просмотра продукта.

Конечный результат основан на сочетании перехода CSS и преобразований, jQuery и Velocity (julian.com/research/velocity).

 

Создание структуры

Структура HTML довольно простая: элемент .cd-section используется для обертывания содержимого раздела, кнопки действия (.cd-modal-action) и модального окна (.cd-modal).
Действие .cd-modal-action содержит кнопку .btn, которая используется для запуска действия, и .cd-modal-bg, который используется как модальный фон. Модальное содержимое обернуто в элемент .cd-modal-content и помещается внутри div.cd-modal.

<section class="cd-section">
 <!-- section content here -->
 
 <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">
 <!-- modal content here -->
 </div>
 </div>
 
 <a href="#0" class="cd-modal-close">Close</a>
</section>

 

Добавление стиля

Мы использовали элемент .cd-modal-bg в качестве фона модального окна: сначала он находится в абсолютном положении и размещен прямо за кнопкой действия .btn с visibility: hidden.
Когда пользователь нажимает кнопку действия, кнопка .btn преобразуется в круг (с использованием класса .to-circle), а .cd-modal-bg становится видимым и масштабируется для охвата всего окна просмотра. Значение шкалы зависит от размера окна просмотра и оценивается (и назначается) с использованием Javascript.

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

В конце анимации масштабирования видимость модального окна изменяется (с использованием класса .modal-is-visible), чтобы показать его содержимое.

 

Обработка событий

Мы использовали jQuery для оценки тех параметров, которые недоступны через CSS: значение шкалы, присвоенное .cd-modal-bg, и его левое и верхнее положение.
Например, так мы оцениваем значение шкалы:

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

 

Вот и всё!

---