Creating CSS3 Animated Notifications with JavaScript – Messg.js

Preview:

Description:

Messg.js is a pure JavaScript library helps you creating various types of notification messages with CSS3 animations.

How to use it:

Load the required messg.js and messg.css in your document as follow.

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

Basic usage:

messg.default('Your text', DELAY)
messg.success('Your text', DELAY)
messg.info('Your text', DELAY)
messg.warning('Your text', DELAY)
messg.error('Your text', DELAY)

Add yes/no/ok buttons.

messg
  .warning('Are you sure?')
  .button('Yes', function() {
  })
  .button('No', function() {
  });
messg
  .success('Task completed')
  .button('Ok');

Add hide handler.

messg
  .warning('Hello!')
  .hide(function() {
  });

More configuration options.

// animation speed in ms
Message.speed = 250
/* top
  top-left
  top-right
  bottom
  bottom-left
  bottom-right */
Message.position = 'top'
// enable/disable messages flow
Message.flow = true
// max flow length
Message.max = null

Changelog:

07/11/2018

• v2.2.0