Add a firefly effect to your site with jQuery fireFly

This is a guest post by Motyar, a fellow developer from India.

Hi, this is Motyar D, Web services and API developer. I want to introduce you with my new jQuery plugin named fireFly. As the name says, the plugin can be used to add firefly effect on any web page background. Last month I updated it to work on a particular div background too. I hope you will find it helpful.

Demos

• A known website using this is itsfirefly.com
• Another working demo

Download

You can download the plugin on github. Also, feel free to fork!

How to use

Include jQuery and the plugin file

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src=" https://raw.github.com/motyar/firefly/master/jquery-firefly-0.2.js "> </script>

Call the plugin

$(document).ready(function() {
 $.firefly({
     images : ['images/fly1by1.png', 'images/fly2by2.png'], //You can change images
     total : 65 // You can edit the number of flies
 });
});

If you want the fireFly effect limited inside a div you can add on: '#divID', like this:

$(document).ready(function() {
   $.firefly({
     images : ['images/fly1by1.png', 'images/fly2by2.png'], //You can change images
     total : 65, // You can edit the number of flies
     on: '#header' // id of div
  });
});

About the author

I am Motyar D Web services and API developer.

I am on twitter: @motyar
My blog: http://motyar.blogspot.com
You can get more about me on Google+