Stylish Animated Notification Plugin with jQuery and CSS3 - AmaranJS

Yet another jQuery notification plugin to display website messages in animated and highly customizable flyout notification boxes.

Features:

• Supports 4 positions: Bottom Right, Top Right, Bottom Left and Top Left.
• 5 built-in effects: fade in/out, slide bottom, slide top, slide right and slide left.
• 6 built-in themes: default, user, blur, rounded, metro and readmore.
• You can create own themes using Theme Template option.
• Before Start and After End callback events supported.

Basic Usage:

1. Include the main CSS and a theme CSS in the head section of the page.

<link rel="stylesheet" href="src/css/jquery.amaran.css">
<link rel="stylesheet" href="src/css/theme/default.css">

2. Include the jQuery Phancy plugin after jQuery library.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="src/js/jquery.amaran.js"></script>

3. Create an Html element to toggle a notification.

<button type="button" id="example">Click me</button>

4. Initialize the plugin and create the messages for the notification.

$('#example').on('click',function(){
$.amaran({
content:{
message:'Your Download is Ready!',
size:'1.4 GB',
file:'my_birthday.mp4',
icon:'fa fa-download' // requires font-awesome
},
theme:'default ok',
position:'bottom right',
inEffect:'slideBottom',
outEffect:'slideTop'
});

5. Options and callbacks.

position: "bottom right",
content:' ',
delay:3000,
sticky:false,
inEffect:'fadeIn',
outEffect:'fadeOut',
theme:'default',
themeTemplate:null,
closeOnClick:true,
closeButton:false,
clearAll:false,
beforeStart:function(){},
afterEnd:function(){},

Change log:

2014-09-13

• v0.5.0

---

This awesome jQuery plugin is developed by hakanersu. For more Advanced Usages, please check the demo page or visit the official website.