5
SHARES
66 CSS effects for notifications using animate.css
December 23, 2014
1 comments
82,371
This tutorial is aimed to show you some very common CSS transitions used in development. I chose to illustrate this on notifications because i can use the both hidden and visible states of elements to display a broad range of animations.

The animations where created originally by Daniel Eden.

There are 4 types of notifications i have used: Top, Center, Bottom Center, Bottom Right.

This tutorial will only work on browsers that supports the most recent CSS3 features and this tutorial is not ready for production.

HTML

Everything will stay inside "notifications" element.



"notifications-window" is the element that hold the two drop downs, the position of the notification and the effects used. Because there are many effects i won't include them all here but you will find them in the demo or download.



The top element will not be shown in the demo HTML but it will be available in the JavaScript as a variable and it will be inserted when the "Top" option is selected.



The same can be said for Center, Bottom Center and Bottom Right notifications. They will not show up in HTML but they will be appended using jquery.

CSS

There are two main CSS files linked in the document. The first one is animate.css which stores the actual animation classes. The second CSS file attached is animated-notifications.css, this contains the CSS code for this tutorial. If you only want to use a particular effect you will have to go and find the CSS class with the name of the desired effect inside animate.css. In order for the notifications to properly be aligned. I have created a separate div to hold the background and it will freely float inside “notifications” div which is the master div element.



The two select drop downs and the select button are hosted inside “#notifications-window”. The position of this div is absolute and is centered using the absolute position with 50% from left and the left margin set to -352px because the total div width is 700px + (2 x 2px ) because of the borders on each side. Regarding the rest of the css styles for this sections i am going to leave you at this because there is nothing special and i don’t want to bother you. So let’s move on to bigger and better things.



The same goes for the rest of the CSS, nothing special here just the fact that all notifications div elements have the position set to absolute.

JavaScript

For the #notifications to be the size of the browser window all the time and not smaller or bigger I have created a resize function that will be activated when the page is loaded and when the window is resized.



Next we have to create a universal function that will be applied each time the close button is clicked.



The HTML for each notification is written inside each variable that corresponds to each notification.



The last thing we have to do is to insert each notification when the appropriate effect is selected. All if statements will become active only when the “#notifications-window-row-button” is clicked. After the submit button is clicked depending on which position has been chosen, the appropriate statement will be activated. If the ‘top’ position is selected we will see this by checking the value inside the select field. We always have to remove the old content before proceeding to append the new content. I say new content because depending on which effect is selected we will have to add the appropriate class, by doing this we change the html content so we can say there is a new and an old content. The notification is inserted together with the appropriate animation class. After adding the class the only thing left to do is summoning the refresh_close() class once again so that the close button for each notification will work with the new content. The top and center notification work by appending the HTML inside the master div “#notifications” meanwhile the bottom and bottom right notifications work by changing the content inside “#notifications-bottom-center” and “#notifications-bottom-right”, big difference here.

 
5
SHARES
1
4
0
0
About the author
Popa Robert: Is the founder of Simbyone.com, freelance web developer and designer, he likes to create beautiful websites and water cooled PC's
1 Comments
Alberto Cantú Gómez
September 30, 2015
Hello Robert, Awesome plugin, I like how you take time to explain and share your knowleadge, love your plugins and tutorials... Just a small question, is there any function to append new notification on top of an older ones, to show multiple notifications? Thanks in advance...
Would you like to share your thoughts?
Name:*
Email:*
Website:
Message:*
Fields marked with * are mandatory. We don't share your email with anyone. Email provided in the above fields are used for identification only. If you chose to subscribe to our newsletter you can cancel at any time.
Hot Posts
1,002,658
22 comments
93,119
8 comments
Subscribe to our newsletter
You have to confirm your email to subscribe successfully. We send our newsletter about once a week.