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

Create Google-like Flash Messages with jQuery and Animate.css - Flash
File Size: 5.51 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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.