Animated Popup Notification JavaScript Library – eNotice

Preview:

Description:

eNotice is a lightweight JavaScript plugin for creating customizable, CSS3 animated popup notifications on the page.

Features:

• 6 awesome animations: pulse, shake, slide-up, slide-down, slide-left, slide-right
• Custom colors, positions, durations.
• Stackable notifications.
• Allows to trigger a function when the notification is dismissed.

How to use it:

Import the JavaScript enotice.js and Stylesheet enotice.css into your html document.

<link rel="stylesheet" href="/src/enotice.css">
<script src="/src/enotice.js"></script>

Create a new popup notification on the screen.

// let instance = new eNotice(message, options);
let instance = new eNotice('This is a default notification');

To config the notification library, pass the following options object as the second parameter to the eNotice function.

let instance = new eNotice('This is a default notification',{
    // Entrance animation
    // pulse, shake, slide-up, slide-down, slide-left, slide-right
    animation: 'pulse',
    // Border and background color
    color: 'black',
    // Duration in milliseconds
    duration: 0,
    // Custom position of the notification
    position: { x: 'right', y: 'bottom' },
    // first or last
    stack: 'last',
    // Callback
    onClose: function(){}
    
});

API methods.

instance.show();
instance.close();
instance.delete();