코드랩 레퍼런스
Layer Popup Style - James Bond 본문
See the Pen layer Popup Style - James Bond by Webstoryboy (@webstoryboy) on CodePen.
제임스 본드 스타일 레이어 팝업입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Layer Popup</title>
<style>
body {background: #f06292}
a {text-decoration: none; color:#666;}
/* btn */
.btn-wrap {
display: flex; justify-content : center; align-items : center;
height: 100vh;
}
.btn-wrap > a {
background-color:#fff;
display:inline-block;
color: rgba(0,0,0,0.7);
padding: 13px 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.26);
height:23px; line-height: 23px;
margin:5px; border-radius: 3px;
}
/* modal */
#modal {
position: fixed; left:0; top:0;
width: 100%; height: 100%;
transform: scale(0);
}
#modal .modal-bg {
background: rgba(0,0,0,0.7);
display:flex; align-items: center; justify-content: center;
height: 100%;
}
#modal .modal-bg .modal-cont {
position:relative;
background: #fff;
padding: 40px; max-width: 500px;
display: inline-block;
}
#modal .modal-bg .modal-cont h2 {
position:relative;
font-size: 30px;
margin:0;
}
#modal .modal-bg .modal-cont p {
position:relative; font-size: 18px;
}
#modal .modal-bg .modal-cont .close {
position: absolute; top: 0; right:0;
margin:20px; padding: 10px;
background: #000;
border-radius: 50%;
}
#modal .modal-bg .modal-cont .close svg {
width: 24px;
fill: #fff;
vertical-align: top;
}
#modal.five {
transform: scale(1);
}
#modal.five .modal-bg {
background: rgba(0,0,0,0);
animation: fadeIn 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.five .modal-bg .modal-cont {
border-radius: 75px;
height: 75px;
width: 75px;
overflow: hidden;
animation: bondJamesBond 1.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.five .modal-bg .modal-cont h2, #modal.five .modal-bg .modal-cont p {
opacity:0;
animation: modalContentFadeIn 0.5s 1.4s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.five .modal-bg .modal-cont .close {
opacity:0;
animation: closeFadeIn 0.5s 1.4s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.out.five {
animation: slowFade 0.5s 1.5s linear forwards;
}
#modal.out.five .modal-bg {
background: rgba(0,0,0,0.7);
animation: fadeToRed 2s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.out.five .modal-bg .modal-cont {
border-radius: 3px;
height: 200px;
width: 450px;
animation: killShot 1s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.out.five .modal-bg .modal-cont h2, #modal.out.five .modal-bg .modal-cont p {
animation: modalContentFadeOut 0.5s 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.out.five .modal-bg .modal-cont .close {
animation: closeFadeOut 0.5s 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
@keyframes slowFade {
0% {opacity: 1;}
99.9% {opacity:0; transform: scale(1);}
100% {transform: scale(0);}
}
@keyframes fadeToRed {
0% {box-shadow: inset 0 0 0 rgba(201,24,24,0.8);}
100% {box-shadow: inset 0 2000px 0 rgba(201,24,24,0.8);}
}
@keyframes bondJamesBond {
0% {transform: translatex(1000px);}
80% {transform: translatex(0px); border-radius: 75px;height:75px;width:75px}
90% {border-radius: 3px; height: 220px; width: 450px;}
100% {border-radius: 3px; height: 200px; width: 450px;}
}
@keyframes killShot {
0% {transform: translatey(0) rotate(0deg); opacity:1;}
100% {transform: translatey(300px) rotate(45deg); opacity:0;}
}
@keyframes modalContentFadeIn {
0% {opacity: 0; top: -20px;}
100% {opacity: 1; top: 0px;}
}
@keyframes modalContentFadeOut {
0% {opacity: 1; top: 0px;}
100% {opacity: 0; top: -20px;}
}
@keyframes closeFadeIn {
0% {opacity: 0; top: -20px;}
100% {opacity: 1; top: 0px;}
}
@keyframes closeFadeOut {
0% {opacity: 1; top: 0px;}
100% {opacity: 0; top: -20px;}
}
@keyframes fadeIn {
0% {background: rgba(0,0,0,0)}
100% {background: rgba(0,0,0,0.7)}
}
@keyframes fadeOut {
0% {background: rgba(0,0,0,0.7)}
100% {background: rgba(0,0,0,0)}
}
</style>
</head>
<body>
<div class="btn-wrap">
<a href="#" class="btn">Popup</a>
</div>
<div id="modal">
<div class="modal-bg">
<div class="modal-cont">
<h2>Layer Popup</h2>
<p>We hope you have enjoyed using Materialize and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon. Any amount would help support and continue development on this project and is greatly appreciated.</p>
<a href="#" class="close close1">
<svg viewBox="0 0 24 24">
<path d="M14.1,12L22,4.1c0.6-0.6,0.6-1.5,0-2.1c-0.6-0.6-1.5-0.6-2.1,0L12,9.9L4.1,2C3.5,1.4,2.5,1.4,2,2C1.4,2.5,1.4,3.5,2,4.1 L9.9,12L2,19.9c-0.6,0.6-0.6,1.5,0,2.1c0.3,0.3,0.7,0.4,1.1,0.4s0.8-0.1,1.1-0.4l7.9-7.9l7.9,7.9c0.3,0.3,0.7,0.4,1.1,0.4 s0.8-0.1,1.1-0.4c0.6-0.6,0.6-1.5,0-2.1L14.1,12z"/>
</svg>
</a>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(".btn").click(function(){
$("#modal").removeAttr("class").addClass("five");
});
$(".close").click(function(){
$("#modal").addClass("out");
});
</script>
</body>
</html>
Share
Ad
Comments