Adding user-friendly notifications is crucial to creating a delightful user experience for many websites and applications. One popular type of notification is the “toast” notification – a small pop-up message that appears on the screen to inform users about an event or action.
In this tutorial, I’ll walk you through creating an animated toast notification from scratch using HTML, CSS, and JavaScript.
What is a Toast Notification?
A toast notification is a non-intrusive way to provide information to users. It’s often used to notify users of successful actions, like form submissions or errors. These notifications typically appear at the bottom, or top of the screen and fade away after a few seconds.
There’s no hard or fast rule on design patterns of toast UI, but the key thing to remember is to keep it non-intrusive so the end user doesn’t need to react immediately.
Getting Started
To create our animated toast notification, we’ll start with a simple HTML structure and CSS styling. We’ll use JavaScript to control its appearance and behavior.
1 | <!DOCTYPE html>
|
2 | <html lang="en"> |
3 | <head>
|
4 | <meta charset="UTF-8" /> |
5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
6 | <link rel="stylesheet" href="styles.css" /> |
7 | <title>Animated Toast Notification</title> |
8 | </head>
|
9 | <body>
|
10 | <button type="button" id="showToastBtn">Show Toast</button> |
11 | </body>
|
12 | </html>
|
CSS Styling
We’ll follow conventional design patterns and affix the toast notification to the bottom right of the browser viewport. Using CSS, we can keep it fixed so it’s always in view if the user happens to scroll the page.
1 | #toast { |
2 | position: fixed; |
3 | bottom: 20px; |
4 | right: 20px; |
5 | padding: 10px 20px; |
6 | background-color: #28a745; |
7 | color: #fff; |
8 | border-radius: 5px; |
9 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); |
10 | transition: opacity 0.3s ease-in-out; |
11 | opacity: 0; |
12 | }
|
13 | |
14 | #toast.show { |
15 | opacity: 1; |
16 | }
|
Make Our Toast Interactive with JavaScript
We’ve created a Toast class that encapsulates the behavior of the toast notification.
This object-oriented approach makes it easier to manage multiple toast notifications and keeps the code organized and reusable.
When and if we need another toast notification, we’ve built the logic to handle it easily.
1 | class Toast { |
2 | constructor(message) { |
3 | this.message = message |
4 | this.toast = document.createElement("div") |
5 | this.toast.id = "toast" |
6 | this.toast.innerHTML = `<p>${this.message}</p>` |
7 | document.body.appendChild(this.toast) |
8 | this.toastBtn = document.getElementById("showToastBtn") |
9 | this.toastBtn.addEventListener("click", () => this.show()) |
10 | }
|
11 | |
12 | show() { |
13 | this.toast.classList.add("show") |
14 | setTimeout(() => { |
15 | this.toast.classList.remove("show") |
16 | }, 3000) // Hide after 3 seconds |
17 | }
|
18 | }
|
19 | |
20 | const myToast = new Toast("This is a toast notification!") |
The constructor within the Toast class initializes the message and creates the toast element dynamically, attaching it to the document body. Notice how the id that gets added correlates to our CSS. The constructor also adds a click event listener to the “Show Toast” button, which listens for the action and fires when clicked.
The show method of the Toast class handles displaying and hiding the toast notification. I added a setTimeout function, which is a predefined delay feature. We pass seconds as milliseconds to adjust how long the toast notification should remain visible.
In some applications, you should show the toast notification after something loads, a process is complete, or errors occur. This can all be done dynamically rather than listening to user input.
Delicious Toast Example
Below is a CodePen with an interactive example. I’ve used the code above and extended the page with content and additional CSS.
Opportunities to Improve
There are plenty of opportunities to enhance the design and user experience. For example, what if there are multiple instance of a toast notification on the page? There should probably be support for many of those. That’s a matter of extending our JavaScript class and CSS styling to accommodate more than one toast at a time.
You could potentially add the ability to dismiss toast notifications as well. I’d recommend keeping the time toasts appear on the screen on the lower spectrum, but consider the time it might take an end user to read the notification.
That’s it for now, I hope you enjoyed this tutorial!