layer Popup Style - Runner

In this example below you will see how to do a layer Popup Style - Runner with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by webstoryboy, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright webstoryboy ©
  • HTML
  • CSS
  • JavaScript
    <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>

/*Downloaded from https://www.codeseek.co/webstoryboy/layer-popup-style-runner-PErGwZ */
    body {background: #9575cd}
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 {font-size: 30px; margin:0;}
#modal .modal-bg .modal-cont p {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.four {
	transform: scale(1);
}
#modal.four .modal-bg {
	background: rgba(0,0,0,0);
	animation: fadeIn 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.four .modal-bg .modal-cont {
	transform: translatex(-1500px);
	animation: roadRunnerIn 0.3s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}

#modal.out.four {
	animation: quickScaleDown 0s .5s linear forwards;
}
#modal.out.four .modal-bg {
	background: rgba(0,0,0,0);
	animation: fadeOut 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}
#modal.out.four .modal-bg .modal-cont {
	animation: roadRunnerOut 0.5s cubic-bezier(0.165, 0.85, 0.44, 1) forwards;
}

@keyframes roadRunnerIn {
	0% {transform: translatex(-1500px) skew(30deg) scalex(1.3); }
	70% {transform: translatex(30px) skew(0deg) scalex(0.9);}
	100% {transform: translatex(0px) skew(0deg) scalex(1);}
}
@keyframes roadRunnerOut {
	0% {transform: translatex(0px) skew(0deg) scalex(1); }
	70% {transform: translatex(-30px) skew(-5deg) scalex(0.9);}
	100% {transform: translatex(1500px) skew(30deg) scalex(1.3);}
}
@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)}
}
@keyframes quickScaleDown {
	0% {transform: scale(1);}
	99.9% {transform: scale(1); }
	100% {transform: scale(0); }
}


/*Downloaded from https://www.codeseek.co/webstoryboy/layer-popup-style-runner-PErGwZ */
    $(".btn").click(function(){
    $("#modal").removeAttr("class").addClass("four");
});

$(".close").click(function(){
    $("#modal").addClass("out");
});

Comments