Skip to main content

Snackbar Notification Animation | HTML, CSS And Javascript

by Rustcode
Snackbar-Animation-HTML-CSS-And-JavaScript

Snackbar Notification Animation using html css and javascript

You may have seen "snack bar notification animations" on a lot of websites. The website looks very attractive and professional with this animation. And it is a creative way of showing notifications. To make this animation you will need html, css and JavaScript.

Let's see how it works, you will have a button on the screen and when you click on that button you will see a notification popup at the bottom of the screen, this notification disappeared after few seconds. Hence it is called a snack bar. You can use "alert strip animation" as the snack bar alternative.

To create "Alert Strip" html, css and javascript are used. CSS is used to beautify the design and javascript is used to close the alert.

You can read our interesting articles on web development. The link is given below.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Snackbar Notification Animation</title> 
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Snackbar Notification Animation</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <button id="btn" onclick="clickFunction()">CLICK HERE</button>
    <div id="snackbar">Text Message</div>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>



03. css

body{
  font-family: sans-serif;
  text-align: center;
}
#btn{
  margin-top: 40px;
  border: 1px solid blue;
  background: #fff;
  color: blue;
  padding: 14px 16px;
  font-weight: bold;
  outline: none;
  cursor: pointer;
  transition: all 0.6s;
}
#btn:hover{
  color: white;
  background: #00f;
}
#snackbar{
  min-width: 250px;
  margin-left: -125px;
  background-color: #000;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
  visibility: hidden;
}
#snackbar.show{
  visibility: visible;
  animation: fadein 0.5s, fadeout 0.5s 2.5s
}
@keyframes fadein {
  from{
    bottom: 0px;
    opacity: 0;
  }
  to{
    bottom: 30px;
    opacity: 1;
  }
}
@keyframes fadeout {
  from{
    bottom: 30px;
    opacity: 1;
  }
  to{
    bottom: 0px;
    opacity: 0;
  }
}



04. JavaScript

function clickFunction(){
  var x = document.getElementById("snackbar");
  x.className = "show";
  setTimeout(function(){
    x.className = x.className.replace("show", "");
  }, 3000);
}


05. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




06. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.





Comments

Post a Comment