Animated Firefly Effect In jQuery - Firefly.js

This is the original version of the jQuery FireFly plugin which applies a cross-browser, highly customizable firefly effect to the background of your webpage or a specified container.

How to use it:

1. Download and load the latest version of the jQuery Firefly.js after jQuery library.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery.firefly-VERSION.js"></script>

2. Initialize the plugin to generate a default firefly background for the whole body.

$.firefly();

3. To apply the firefly background to a container element you specify, follow this step:

<div id="firefly">
  ...
</div>

$.firefly({
  on: '#firefly'
});

4. Full plugin options to customize the firefly effect.

• total: The amount of fireflies to create
• ofTop: The offset for the top
• ofLeft: The offset for the left
• on: The content to put the fireflies in
• twinkle: The opacity of the fireflies
• minPixel: The smallest the fireflies can be
• maxPixel: The largest the fireflies can be
• color: The color of the fireflies
• namespace: The class the fireflies have
• zIndex: The z-index on which the fireflies are placed on
• borderRadius: The border radius for the fireflies
• _paused: Whether or not the fireflies is are paused

$.firefly({
  total: 10,
  ofTop: 0,
  ofLeft: 0,
  on: 'document.body', 
  twinkle: 0.2, 
  minPixel: 1,
  maxPixel: 2,
  color: '#fff',
  namespace: 'jqueryFireFly', 
  zIndex: Math.ceil(Math.random() * 20) - 1,
  borderRadius: '50%',
  _paused: false
});

---

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