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.

www  •  May 4, 2014 12:32

It is truly a very valuable piece of data. Now i am contented for you to provided this helpful information about. Remember to continue to be people up-to-date like that. Many thanks for expressing. Well done!

www  •  May 5, 2014 12:22

This informationis worth everyone's attention. How can I find out more? Well done!

www  •  May 5, 2014 12:29

Hey there! This is my first visit to your blog! We are a group of volunteers and starting a new initiative in a community in the same niche. Your blog provided us valuable information to work on. You have done a extraordinary job! Well done!

www  •  May 6, 2014 12:13

Write comment hereIt is truly a very valuable piece of data. Now i am contented for you to provided this helpful information about. Remember to continue to be people up-to-date like that. Many thanks for expressing. Well done! Awesome site!

www  •  May 6, 2014 12:18

A chance to see your article , your article let me know a lot of things , this article is really good. Appreciate that!

www  •  May 10, 2014 12:39

Very beautiful, this blog write very meaningful, we all can learn many useful things,content is very rich and colorful. Great site! Great job!

www  •  May 10, 2014 12:45

I was suggested this website by my cousin. I'm not sure whether this post is written by him as nobody else know such detailed about my difficulty. You're incredible! Thanks a lot!

www  •  May 10, 2014 12:45

Very beautiful, this blog write very meaningful, we all can learn many useful things,content is very rich and colorful. Great site! Great job! Great effort!

www  •  May 10, 2014 12:53

Hi there, just changed into alert to your weblog through Google, and located that it is truly informative. I am gonna be careful for brussels. I will appreciate if you happen to proceed this in future. Numaerous other folks shall be benefited out of your writing. Cheers! Great site!

www  •  May 22, 2014 08:26

Basically great writeup. This actually once were a new pleasure bill it. View complex so that you can additional unveiled acceptable by you! Nonetheless, exactly how may possibly all of us keep up to date a communication? Thanks!

www  •  May 22, 2014 09:31

It is truly a very valuable piece of data. Now i am contented for you to provided this helpful information about. Remember to continue to be people up-to-date like that. Thanks for sharing!

www  •  May 22, 2014 09:32

It is truly a very valuable piece of data. Now i am contented for you to provided this helpful information about. Remember to continue to be people up-to-date like that. Thanks for sharing!

www  •  May 22, 2014 10:04

I agree with you, if you want to get more information about MCITP MCSE please link this website. Well done!

www  •  May 22, 2014 10:53

you've an awesome weblog here! would you like to create some invite posts on my blog? Thanks!

www  •  May 22, 2014 11:01

Hello, I enjoy study your own post. I truly value for your function. Just discussing. The post is great and easy to read and undersatnd. Thanks for sharing.

Acne  •  June 9, 2014 16:49

Very beautiful, this blog write very meaningful, we all can learn many useful things,is also very helpful to people. Well done!

Hair Removers  •  June 9, 2014 16:55

This post has helped me to have another perspective. Thanks!

Weight Loss Help  •  June 9, 2014 17:04

It is truly a very valuable piece of data. Now i am contented for you to provided this helpful information about. Remember to continue to be people up-to-date like that. Many thanks for expressing. Awesome job! Well done!

Hair Growth  •  June 9, 2014 17:18

This blog post be written perfectly!That is rich , easy to understand and the color is thick ,very absorbing ,worth to read. Well done!

Web Hosting  •  June 9, 2014 17:26

Very beautiful, this blog write very meaningful, we all can learn many useful things,your article is really Great site!

vDwTVW  •  June 9, 2014 17:28

Very beautiful, this blog write very meaningful, we all can learn many useful things,your article is really Great site!

Ben for Christmas Tree Info  •  June 22, 2014 16:19

Very inspiring article, very useful course. Soon I'll try, thank you for sharing.

Rooftop Cargo Carriers  •  June 22, 2014 16:22

Nice blog, many visitors were very satisfied with the articles that you write. Good luck ..

The Best Document Scanner  •  June 22, 2014 16:25

Good post, your blog will hopefully useful again to more people. Congratulations ..

alat bantu sex  •  June 24, 2014 11:33

thanks for this awesome web page post.

Post your comment

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

back