Animated Firefly Effect In jQuery - Firefly.js

File Size: 5.68 KB
Views Total: 4469
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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.