Hello Coders! Welcome to JS Animation Blog. In this, we're going to see how to create an Unsubscribe Newsletter Animation in Pure JS. You might have used such feature in many website where you need to unsubscribe to a certain newsletter. But they just give you a button for this. Here's a unique way for you to unsubscribe or even subscribe to a newsletter which attracts users and catches their attention.
Here's a preview-
That being said, let us get started.
Step - 1: Like always, create 2 files - index.html and style.css.
Step - 2: Copy the below HTML code and paste it into your code editor.
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Unsubscribe</title>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css'><link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="wrap">
<div class="envelope">
<div class="back"></div>
<div class="page_contain">
<div class="page">
<div class="content">
<h5>Are you sure you want to unsubscribe?</h5>
<button class="btn btn-info btn-sm confirm_unsub">Unsubscribe</button>
<button class="btn btn-default btn-sm cancel_unsub">Cancel</button>
</div>
</div>
</div>
<div class="envelope_body">
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
</div>
</div>
<p style="margin: 0 auto; margin-top: 20px; display: block; width: fit-content;"><a style="cursor: pointer; color: #17a2b8;" class="unsub">Unsubscribe</a> from our newsletter</p>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>
Step - 3: Below is the CSS code for styling.
CSS
body {
background: #f6f7fc;
}
.wrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.envelope {
height: 170px;
width: 300px;
position: relative;
}
.envelope_body {
position: relative;
border-radius: 5px;
overflow: hidden;
height: 170px;
width: 300px;
z-index: 3;
}
.page,.left,.right,.bottom {
position: absolute;
}
.back {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #414859;
border-radius: 5px;
}
.back::after {
content: '';
position: absolute;
top: 2px;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-top: 85px solid #414859;
border-bottom: 85px solid transparent;
pointer-events: none;
z-index: 1;
transform-style: preserve-3d;
transform-origin: 0% 0%;
transition: 0.3s;
}
.envelope.open .back::after {
transform: rotateX(180deg);
}
.envelope.close-env .back::after {
transform: rotateX(0deg);
transition-delay: 0.8s;
z-index: 2;
}
.right {
right: 0;
bottom: -1px;
border-left: 150px solid transparent;
border-right: 150px solid #474e5f;
border-top: 85px solid transparent;
border-bottom: 85px solid transparent;
}
.bottom {
bottom: 0;
border-left: 150px solid transparent;
border-right: 150px solid transparent;
border-top: 85px solid transparent;
border-bottom: 85px solid #414859;
}
.left {
left: 0;
bottom: -1px;
border-left: 150px solid #474e5f;
border-right: 150px solid transparent;
border-top: 85px solid transparent;
border-bottom: 85px solid transparent;
}
.page_contain {
perspective: 100px;
position: absolute;
height: 170px;
width: 300px;
}
.page {
border-radius: 4px;
width: 270px;
height: 148px;
position: absolute;
bottom: 0;
left: 15px;
background: white;
box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.1);
transition: 0.3s;
transform-style: preserve-3d;
}
.envelope.open .page_contain, .envelope.close-env .page_contain {
animation-iteration-count: 1;
animation-duration: 0.5s;
animation-fill-mode: forwards;
animation-delay: 0.3s;
}
.envelope.open .page_contain {
animation-name: z-forward;
}
.envelope.close-env .page_contain {
animation-name: z-backward;
z-index: 4;
}
@keyframes z-forward {
0% { z-index: 1; }
45% { z-index: 4; }
100% { z-index: 4; }
}
@keyframes z-backward {
0% { z-index: 4; }
45% { z-index: 4; }
100% { z-index: 1; }
}
.envelope.open .page, .envelope.close-env .page {
animation-iteration-count: 1;
animation-duration: 0.5s;
animation-fill-mode: forwards;
animation-delay: 0.3s;
}
.envelope.open .page {
animation-name: open;
}
.envelope.close-env .page {
animation-name: close;
bottom: 15px; z-index: 4; transform: rotateX(0deg);
}
@keyframes open {
0% { bottom: 0; z-index: 1; }
25% { bottom: 170px; z-index: 1; }
45% { bottom: 170px; z-index: 4; }
55% { bottom: 170px; z-index: 4; transform: rotateX(8deg); }
100% { bottom: 15px; z-index: 4; transform: rotateX(0deg); }
}
@keyframes close {
0% { bottom: 15px; z-index: 4; transform: rotateX(0deg); }
25% { bottom: 170px; z-index: 4; transform: rotateX(8deg); }
45% { bottom: 170px; z-index: 4; }
55% { bottom: 170px; z-index: 1; }
100% { bottom: 0; z-index: 1; }
}
.page .content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: fit-content;
text-align: center;
}
.page .content .btn {
display: inline-block;
}
Step - 4: Below is the JS code for the functionality.
JS
$(document).on("click", ".unsub", function () {
var wrap = $(this).closest(".wrap");
var env = wrap.find(".envelope");
env.addClass("open");
});
$(document).on('click', '.cancel_unsub', function() {
var wrap = $(this).closest(".wrap");
var env = wrap.find(".envelope");
env.addClass("close-env");
env.delay(600).queue('fx', function(next) {
$(this).removeClass('open');
next();
});
env.delay(800).queue('fx', function(next) {
$(this).removeClass('close-env');
next();
});
});
And that's it. You're done.
Let me know in the comments if you have any doubt related to this.
Follow @creocodigo for more projects and web related content.
If you find this useful, below are some other posts that I am sure you'll love