Add a firefly effect to your site with jQuery fireFly

Add fireflies to your site with jQuery fireFly plugin

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

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+


Comments

k24  •  February 2, 2012 23:31

Really nice effect, thanks for sharing! But it's impossible to make the sparks fly under something else than a , unless you change the name of the div in the script (line 73, replace "$("#header").append(spark);" with "$("#firefly").append(spark);" for example), set z-index to '1' (line77) and add this div in the html.

David  •  March 20, 2012 14:49

Hello, I love this plugin but for some reason I can't get it to work! I followed all the steps above an it's still not working. Anybody else having this problem?

David  •  March 22, 2012 13:36

I really want to use this for my site, can anyone help me it's not working??? I followed the first two steps above (Included jQuery and the plugin file and called the plugin). Is that all?

David  •  March 22, 2012 14:09

Finally got it to work! Great plugin, I love it : )

Chan Luu Costume Fashion Jewellery  •  April 6, 2012 10:37

I would like to thank you for the efforts you have made in writing this post. I am hoping the same best work from you in the future as well. In fact your creative writing abilities has inspired me to start my own BlogEngine blog now.

Motyar  •  April 27, 2012 21:32

Thank you all!

Kawsar  •  June 3, 2012 16:56

Yes I agree, more AJAX examples would be nice! I’m thinking of writing a dedicated post to AJAX examples and demos in the future if there is enough interest.
http://bit.ly/KXrI9u

mate  •  June 14, 2012 17:59

its a very nice plugin ... nice !

Faisal  •  June 18, 2012 19:10

The plugin is great. I have a question that is how can i set words instead of images in the firefly script?

Leena  •  June 22, 2012 10:06

Excellent post. Thanks for sharing!

Carl Rivers  •  July 7, 2012 14:08

I am happy to found your blogs.It is really great.I learn new things from your website.I like your thoughts.Thanks for making such a cool post.

Web Application Development Boston

M Zoref  •  August 5, 2012 22:56

I have a wordpress site and I used photocrati theme template and some plugins, how would I add this to my site as a background, like I saw on firefly site or http://www.bindroidroms.com/site/ where I saw it from. Is there a plan for Wordpress plugin? if not can you tell me where to put these codes? Thanks

M Zoref  •  August 12, 2012 23:57

anyone?

Taha Ziaee  •  August 13, 2012 02:44

Hey M Zoref email me at taha.m.ziaee@gmail.com and I'll tell you how.

Fred  •  October 17, 2012 05:50

This is very cool plugin . Thank you very much. Hope you will some list of cool effects that we can use soon.

George Marshall  •  November 15, 2012 09:56

I enjoyed this effect. Will be using this in future web design projects. Thanks and keep up the good work !!

Zimmet Vein & Dermatology - Austin  •  January 16, 2013 20:05

Thanks for illustrating the commands. Without illustration it’s really tough to understand.

Dawid  •  January 20, 2013 14:42

Why sometimes the sparks effects shows a vertical scrollbar ?
Best to see this is to hit refresh few times until You will see what I mean.

How to fix it ?

Dawid  •  January 20, 2013 14:46

Sorry I meant it shows horizontal scrollbar.

Rohan Shewale  •  February 24, 2013 14:43

Superb plugin...
I worked on stars with the help of this.

Rodrigo  •  March 21, 2013 05:53

I found a problem using it, with Wordpress and FlashLight Theme and Woocommerce Cart, the problem was, whan the mouse was over a link menu, and a spark crosses that space the mouse unselect the link, i found the solution:
change the line 75 on the jquery.firefly.min.js
from
'z-index': $.firefly.random(20),
to
'z-index':1,

and you will solve the problem about z-index.

Encrypto  •  March 24, 2013 12:04

@Dawid, to hide horizontal scrollbar

body {
overflow-x:hidden;
}

1n3gan  •  April 6, 2013 22:22

Unfortunately it doesn't work with jQuery jquery-1.7.1

RUstam  •  May 9, 2013 09:02

how do I set up traffic only?
And to top it disappeared?
I need an effect like sparks from a fire and not like fireflies

noob  •  June 9, 2013 21:41

can anyone please help me implement this thing on tumblr?

newbie  •  June 25, 2013 19:45

how to set this behind element

Vousys  •  June 29, 2013 14:03

Hey guys! i found that some z-index problem with Jquery 1.9.1 and the images not show

Change this line
'z-index': -1*$.firefly.random(20), //under all the stuff
to
'z-index':$.firefly.random(20), //under all the stuff
(remove -1*)

And also change
}, (($.firefly.random(10) + 5) * 2000),function(){ $.firefly.fly(sp) } );
to
}, (($.firefly.random(10) + 5) * 100),function(){ $.firefly.fly(sp) } );

i hope someone else help!

Chris  •  July 7, 2013 02:08

Is there anyway to adapt this on a hosted forum like jcink?

Jamil  •  August 8, 2013 21:40

Hi, I really like this plugin but I'm totally confused on where to add these codes into my wordpress site. Do I add it to functions.php somewhere? I would really appreciate any help! I'm very new to adding jquery plugins into wordpress so please dummy it all down for me and show me where to add the code. Sorry I'm so lame! lol. Thank you!

Paul  •  September 4, 2013 09:30

Hi there just wondering if you think maybe it's better to use html rather than an image for the firefly?

ranran  •  January 14, 2014 15:52

how do i add attribute width and height of this plugin?

Mark  •  February 13, 2014 19:45

hey guys how do you make this work ? please teach me.

Oxize Photography  •  April 9, 2014 00:01

How do i get this firefly effect into my main page @ www.oxize.nl

Where i need to put this code? In my php template? Kinda confusing.

Can anyone check in which template. It needs to be loaded in the front page.

Greets..

طراحی سایت در اصفهان  •  April 10, 2014 08:10

you have already add it . it is good .
could you say how did you this ?

Oxize Photography  •  April 15, 2014 21:45

In my case, i edited my home.php, which is my main template which het loaded when you enter my site.

Just paste the code after the head code.if you want in specificaties regio's, tien paste it within a div.

I want to try to hide the firefly behind all pictures windows, so they show only up at the site of the background.

Post your comment

(optional)
(optional, will not be shown)
NOTE: Any links will have rel="nofollow"

back