In this post you'll learn how to create an animated notification message with HTML, CSS, and JavaScript. This tutorial covers from creating the basic markup to adding animation with CSS and JavaScript.
This guide includes step-by-step instructions, code examples, and screenshots. It's perfect for web developers of all levels who want to learn how to create an animated notification message for their website.
This notification is for success message. I have already uploaded the success pop up box using HTML, CSS and JavaScript.
Here I show you success notification message, that show, when user click on button, first the image is appears (drop down) then after some time message will, then after sometime message disappears and only image left and again after sometime image go to upside. In short when user click on button notification message shows with animation and after three second it disappears automatically.
I have made this notification message work on click, you can also make it automatic.
Video Tutorial on Animated notification.
Animated Message Notification.
File structure:
index.html
index.css
I'vs also use JavaScript, That I have used within HTML file.
Steps to create animated success notification using HTML, CSS & JavaScript.
Step 1: Create basic structure and simple notification design.
First create basic html structure and create simple message notification. I have place that notification (You can see below code, there is a box class that is the notification box.) message at top 10%.
class container is for background (with full width). So we'll create a notification with image and text.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box">
<div class="image"><img src="image/success.png"></div>
<p class="message">Success</p>
</div>
</div>
</body>
</html>
CSS
*{
padding: 0;
margin: 0;
}
.container{
width: 100%;
height: 100vh;
background-color: #f1f1f1;
position: relative;
}
.box{
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50% , -50%);
background-color: #72e434a8;
padding: 8px;
display: flex;
align-items: center;
border-radius: 500px;
pointer-events: none;
transition: 0.2s;
}
.box .image{
background-color: #fff;
padding: 10px 12px;
border-radius: 500px;
}
.box .image img{
width: 25px;
height: 25px;
}
.box .message{
font-size: 30px;
margin: 0px 10px;
color: #000;
transition: 0.2s;
}
Output :
Step 2: Hide the notification.
Notification is ready, Now we'll hide it. Because we only want to show on a click of button but with anmation. and hide automatically after few seconds.
When user click on button (we'll create later) first the notification image appears, then after few second an message or text appears.
Then after few seconds, a text or message disappears and after that image also disappears.
So we'll hide text or message (class="message") first.
CSS
.box .message{
font-size: 0px;
margin: 0px;
color: #000;
transition: 0.2s;
}
Output :
We'll also hide image.
So, to hide the image I have just change the top position of box class (means whole notification box) from 10% to -10%.
CSS
.box{
position: absolute;
top: -10%;
left: 50%;
transform: translate(-50% , -50%);
background-color: #72e434a8;
padding: 8px;
display: flex;
align-items: center;
border-radius: 500px;
pointer-events: none;
transition: 0.2s;
}
Step 4 :Add button to show notification.
So, we'll add button to show notification when click on it.
Also read: Rotating border animation on button.
HTML
<button class="click" type="button">Click here</button>
CSS
.container .click{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
font-size: 30px;
color: #000;
background-color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
}
.container .click:active{
background-color: #e2e2e2;
}
Output :
Now let's run function on this button click. The function is to show this notification message with animation.
Step 5: Adding JavaScript to show notification when click on button.
So, let's add JavaScript to show the notification (with message) when click on button. So, when user click on button, notification (drop down) shows and after 3 second is hides automatically.
JavaScript
let box = document.querySelector(".box");
let image = document.querySelector(".image");
let message = document.querySelector(".message");
let click = document.querySelector(".click");
let settimeout = "";
click.onclick = function(){
clearTimeout(settimeout);
box.style.transitionDelay = "unset";
box.style.top = "10%";
message.style.fontSize = "30px";
message.style.margin = "0px 10px";
message.style.transitionDelay = "500ms";
settimeout = setTimeout(() => {
box.style.top = "-10%";
message.style.fontSize = "0px";
message.style.margin = "0px";
box.style.transitionDelay = "1000ms";
}, 3000);
}
You can see demo in above YouTube video.
You may like:
- How to create pop up message box that hides when click outside of it using HTML, CSS & JavaScript.
- How to create check mark animation using JavaScript.
- How to create mouse click animation using HTML, CSS & JavaScript.
- How to create mouse cursor tail using HTML, CSS & JavaScript.
Final code :
So that's how you can make animated notification message using HTML CSS and JavaScript. If you have any question or suggestion you can write them in the comment section below.
Share your thoughts.