Скрипт полноэкранного модального окна с красивым и необычным эффектом. Идея данного окна заключается в том, что при клике на кнопку модальное окно будет открываться с приятной анимацией в виде облаков. В открывшемся окне можно разметить что любой контент.
Скрипт окна состоит из двух html частей: внешней, которая представляет собой кнопку и внутренней, которая открывает содержимое на весь экран.
HTML разметка
Видимая часть страницы
<div class="cs-main-content">
<span style="position:absolute;left:45%;top:35%;text-transform:uppercase;padding:1em .5em"><a href="#" class="cd-btn cd-modal-trigger but-blue-act">click on the button</a></span>
</div>
Внутренняя часть cd-modal
<div class="cd-modal">
<div class="modal-content">
<h1>Madeas studio</h1>
<p>Агентство предлагает полный комплекс услуг для проектов любого уровня и любой стадии готовности — от начальной, когда есть лишь идея, нуждающаяся в разработке, создании инструментов и продвижении, до заключительной, когда ресурсу необходима только поддержка. Вы так же можете заказать разработку индивидуальных баннеров, иконок и оформление своей группы В Контакте.</p>
</div>
<a href="#0" class="modal-close">закрыть</a>
</div>
<div class="cd-transition-layer">
<div class="bg-layer"></div>
</div>
CSS
Видимая часть
.cd-main-content {
position: relative;
z-index: 2;
width: 100%;
height: 100vh;
/* vertically align its content */
display: table;
background-color: #e4dcca;
}
.cd-main-content .center {
/* vertically align inside parent element */
display: table-cell;
vertical-align: middle;
text-align: center;
}
Внутренняя часть
.cd-modal {
position: fixed;
top: 0;
left: 0;
z-index: 3;
height: 100%;
width: 100%;
overflow: hidden;
background: #402f44 url(/background/par1.jpg) no-repeat center center;
background-size: cover;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s;
-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s;
transition: opacity 0.3s 0s, visibility 0s 0.3s;
}
Здесь мы устанавливаем свое фоновое изображение, цвет текста и прочие детали.
Едем дальше...
.cd-modal .modal-content {
height: 100%;
overflow-y: auto;
padding: 3em 5%;
color: #444;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.cd-modal h1 {
text-align: center;
}
.cd-modal h1::after {
/* ink/brush separation */
content: '';
display: block;
width: 130px;
height: 18px;
background: url() no-repeat center center;
margin: .2em auto 0;
}
.cd-modal p {
line-height: 1.6;
margin: 2em auto;
max-width: 800px;
}
.cd-modal .modal-close {
/* 'X' icon */
position: absolute;
z-index: 1;
top: 20px;
right: 5%;
height: 45px;
width: 45px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.3) url(/images/demo/cd-icon-close.svg) no-repeat center center;
/* image replacement */
overflow: hidden;
text-indent: 100%;
white-space: nowrap;
visibility: hidden;
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
-webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
-moz-transition: -moz-transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
transition: transform 0.3s 0s, visibility 0s 0.3s, opacity 0.3s 0s;
}
.no-touch .cd-modal .modal-close:hover {
background-color: rgba(0, 0, 0, 0.5);
}
.cd-modal.visible {
opacity: 1;
visibility: visible;
-webkit-transition: opacity 0.7s, visibility 0s;
-moz-transition: opacity 0.7s, visibility 0s;
transition: opacity 0.7s, visibility 0s;
}
.cd-modal.visible .modal-content {
/* this fixes the buggy scrolling on webkit browsers - mobile devices only - when overflow property is applied */
-webkit-overflow-scrolling: touch;
}
.cd-modal.visible .modal-close {
visibility: visible;
opacity: 1;
-webkit-transition: -webkit-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
-moz-transition: -moz-transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
transition: transform 0.3s 0s, visibility 0s 0s, opacity 0.3s 0s;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
/* ---- Transition Layer ---- */
.cd-transition-layer {
position: fixed;
top: 0;
left: 0;
z-index: 2;
height: 100%;
width: 100%;
opacity: 0;
visibility: hidden;
overflow: hidden;
}
.cd-transition-layer .bg-layer {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translateY(-50%) translateX(-2%);
-moz-transform: translateY(-50%) translateX(-2%);
-ms-transform: translateY(-50%) translateX(-2%);
-o-transform: translateY(-50%) translateX(-2%);
transform: translateY(-50%) translateX(-2%);
/* its dimentions will be overwritten using jQuery to proportionally fit the viewport */
height: 100%;
/* our sprite is composed of 25 frames */
width: 2500%;
background: url(/images/demo/cd-transition-layer.png) no-repeat 0 0;
background-size: 100% 100%;
}
.cd-transition-layer.visible {
opacity: 1;
visibility: visible;
}
.cd-transition-layer.opening .bg-layer {
-webkit-animation: cd-sprite 0.8s steps(24);
-moz-animation: cd-sprite 0.8s steps(24);
animation: cd-sprite 0.8s steps(24);
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.cd-transition-layer.closing .bg-layer {
-webkit-animation: cd-sprite-reverse 0.8s steps(24);
-moz-animation: cd-sprite-reverse 0.8s steps(24);
animation: cd-sprite-reverse 0.8s steps(24);
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
.no-cssanimations .cd-transition-layer {
display: none;
}
Добавим простую анимацию через keyframes
@-webkit-keyframes cd-sprite {
0% {
/* translateX(-2%) is used to horizontally center the first frame inside the viewport */
-webkit-transform: translateY(-50%) translateX(-2%);
}
100% {
/* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport */
-webkit-transform: translateY(-50%) translateX(-98%);
}
}
@-moz-keyframes cd-sprite {
0% {
/* translateX(-2%) is used to horizontally center the first frame inside the viewport */
-moz-transform: translateY(-50%) translateX(-2%);
}
100% {
/* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport */
-moz-transform: translateY(-50%) translateX(-98%);
}
}
@keyframes cd-sprite {
0% {
/* translateX(-2%) is used to horizontally center the first frame inside the viewport */
-webkit-transform: translateY(-50%) translateX(-2%);
-moz-transform: translateY(-50%) translateX(-2%);
-ms-transform: translateY(-50%) translateX(-2%);
-o-transform: translateY(-50%) translateX(-2%);
transform: translateY(-50%) translateX(-2%);
}
100% {
/* translateX(-98%) (2% + 96) is used to horizontally center the last frame inside the viewport */
-webkit-transform: translateY(-50%) translateX(-98%);
-moz-transform: translateY(-50%) translateX(-98%);
-ms-transform: translateY(-50%) translateX(-98%);
-o-transform: translateY(-50%) translateX(-98%);
transform: translateY(-50%) translateX(-98%);
}
}
@-webkit-keyframes cd-sprite-reverse {
0% {
-webkit-transform: translateY(-50%) translateX(-98%);
}
100% {
-webkit-transform: translateY(-50%) translateX(-2%);
}
}
@-moz-keyframes cd-sprite-reverse {
0% {
-moz-transform: translateY(-50%) translateX(-98%);
}
100% {
-moz-transform: translateY(-50%) translateX(-2%);
}
}
@keyframes cd-sprite-reverse {
0% {
-webkit-transform: translateY(-50%) translateX(-98%);
-moz-transform: translateY(-50%) translateX(-98%);
-ms-transform: translateY(-50%) translateX(-98%);
-o-transform: translateY(-50%) translateX(-98%);
transform: translateY(-50%) translateX(-98%);
}
100% {
-webkit-transform: translateY(-50%) translateX(-2%);
-moz-transform: translateY(-50%) translateX(-2%);
-ms-transform: translateY(-50%) translateX(-2%);
-o-transform: translateY(-50%) translateX(-2%);
transform: translateY(-50%) translateX(-2%);
}
}
Адаптируем окно под мобильные устройства
@media only screen and (min-width: 1100px) {
.cd-modal .modal-content {
padding: 6em 5%;
}
.cd-modal .modal-close {
height: 60px;
width: 60px;
}
.cd-modal p {
font-size: 2rem;
}
}
jQuery
jQuery(document).ready(function($){
//cache some jQuery objects
var modalTrigger = $('.cd-modal-trigger'),
transitionLayer = $('.cd-transition-layer'),
transitionBackground = transitionLayer.children(),
modalWindow = $('.cd-modal');
var frameProportion = 1.78, //png frame aspect ratio
frames = 25, //number of png frames
resize = false;
//set transitionBackground dimentions
init();
$(window).on('resize', function(){
if( !resize ) {
resize = true;
(!window.requestAnimationFrame) ? setTimeout(init, 300) : window.requestAnimationFrame(init);
}
});
//open modal window
modalTrigger.on('click', function(event){
event.preventDefault();
transitionLayer.addClass('visible opening');
var delay = ( $('.no-cssanimations').length > 0 ) ? 0 : 600;
setTimeout(function(){
modalWindow.addClass('visible');
}, delay);
});
//close modal window
modalWindow.on('click', '.modal-close', function(event){
event.preventDefault();
transitionLayer.addClass('closing');
modalWindow.removeClass('visible');
transitionBackground.one('webkitAnimationEnd oanimationend msAnimationEnd animationend', function(){
transitionLayer.removeClass('closing opening visible');
transitionBackground.off('webkitAnimationEnd oanimationend msAnimationEnd animationend');
});
});
function init() {
var windowWidth = $(window).width(),
windowHeight = $(window).height(),
unitHeight, unitWidth;
if( windowWidth/windowHeight > frameProportion ) {
unitWidth = windowWidth;
unitHeight = unitWidth/frameProportion;
} else {
unitHeight = windowHeight*1.2;
unitWidth = unitHeight*frameProportion;
}
transitionBackground.css({
'width': unitWidth*frames+'px',
'height': unitHeight+'px',
});
resize = false;
}
});
Готово!
| View demo |
|
Понравился материал? Поделитесь с друзьями |
С этим материалом смотрят:
| Feedback: 0 | |