*{
margin:0;
padding:0;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
body{
font-family: 'Open Sans Condensed', sans-serif;
background: #24C6DC; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #514A9D, #24C6DC); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #514A9D, #24C6DC); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
-webkit-transition:.5s;
transition:.5s;
}
.circle, .triangle{
position:fixed;
display:block;
}
.circle{
border-radius:50%;
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
-webkit-transition:.5s;
transition:.5s;
}
.circle:hover{
-webkit-transform:scale(1.4);
-ms-transform:scale(1.4);
transform:scale(1.4);
}
.circle:nth-child(1){
width:300px;
height:300px;
border:3px solid #fff;
top:150px;
left:-100px;
border-radius:50%;
}
.circle:nth-child(2){
width:120px;
height:120px;
right:90px;
top:80px;
background:#fff;
}
.circle:nth-child(3){
width:200px;
height:200px;
right:300px;
bottom:-90px;
border:3px solid #fff;
}
.circle:nth-child(4){
width:50px;
height:50px;
left:390px;
top:50px;
background:#fff;
}
.btn{
position:absolute;
left:50%;
top:50%;
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1);
padding:15px 35px;
border:1px solid #24C6DC;
border-radius:50px;
background:transparent;
cursor:pointer;
font-family: 'Open Sans Condensed', sans-serif;
font-size:1.2em;
color:#fff;
-webkit-transition:.5s;
transition:.5s;
}
.btn:focus{
outline:none;
}
.btn:hover{
-webkit-transform:scale(1.2);
ransform:scale(1.2);
background:#24C6DC;
-moz-box-shadow: 0px 0px 20px rgba(56,56,56,.2);
-webkit-box-shadow: 0px 0px 20px rgba(56,56,56,.2);
box-shadow: 0px 0px 20px rgba(56,56,56,.2);
}
.popup{
display:block;
width:500px;
height:250px;
background:#fff;
border-radius:5px;
margin:80px auto;
z-index:999;
overflow:hidden;
-webkit-transform:translateY(-300%);
transform:translateY(-300%);
-moz-box-shadow: 0px 0px 20px rgba(56,56,56,.2);
-webkit-box-shadow: 0px 0px 20px rgba(56,56,56,.2);
box-shadow: 0px 0px 20px rgba(56,56,56,.2);
text-align:center;
line-height:7em;
font-size:2em;
position:relative;
-webkit-transition: all 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 900ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
.popup h1{
color:#8e54e9;
text-transform:capitalize;
font-weight:200;
font-size:1.1em;
position:relative;
left:-200%;
-webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
-webkit-transition-delay:900ms;
transition-delay:900ms;
}
.popup .close{
position:absolute;
top:-80px;
right:15px;
font-size:.9em;
font-weight:lighter;
cursor:pointer;
color:#8e54e9;
-webkit-transition:.5s;
transition:.5s;
}
.overlay{
overflow-x:hidden;
overflow-y:hidden;
-webkit-transition:all 3s ease-in-out;
transition:all 3s ease-in-out;
}
.overlay::before{
content: " ";
width: 100%;
height: 100%;
position: fixed;
z-index: 8;
top: 0;
left: 0;
background: rgba(0, 0, 0, .5);
-webkit-transition:3s;
transition:3s ;
}
import {$ , jQuery} from "jquery";
window.jQuery = $;
window.$ = $;
(() => {
const button = $('#btn');
const popup_window = $('.popup');
const close_button = popup_window.find('.close');
button.on('click',()=>{
popup_window.css({
'transform':'translateY(0)',
'z-index':'999'
});
$('body').addClass('overlay');
popup_window.find('h1').animate({
left:'0'
},900);
$(this).css({
'z-index':'-1'
});
});
close_button.on('click',() =>{
$(this).parent('.popup').css({
'transform':'translateY(-300%)'
});
$('body').removeClass('overlay');
$(this).parent('.popup').siblings('.btn').css({
'z-index':'1'
});
});
})();
View Compiled