Create Google-like Flash Messages with jQuery and Animate.css - Flash

Flash is a simplest jQuery plugin used to display Google style toast messages while flashing the whole screen using CSS3 animations based on Animate.css.

How to use it:

1. Load the required Animate.css in the head section.

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.min.css">

2. Create a flash message on your web page.

<div class="sf-flash">This is a flash message.</div>

3. Load the latest version of jQuery library and the jQuery Flash plugin at the bottom of the web page.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="jquery.sf-flash.js"></script>

4. Enable the plugin with default animation options.

$('.sf-flash').sfFlash();

5. Style the message whatever you like in the CSS.

.sf-flash {
  display: none;
  background: #404040;
  position: absolute;
  bottom: 47px;
  left: 30px;
  padding: 20px 16px;
  color: #fff;
  letter-spacing: 0.03em;
  border-radius: 3px;
  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.07);
  -webkit-animation-duration: .2s;
}

6. Available options.

// The number of milliseconds before the script runs
delay: 50,

// The number of milliseconds that the flash message should be displayed
duration: 5000

Change log:

2015-09-29

• Made the flash message fixed rather than absolute to ensure the page is scrollable

---

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