Noise is an important part of most designs when it comes to websites. It helps direct the user’s attention to certain parts of the site without overwhelming them. I’ve recently started seeing sites use a type of Javascript animation that is really appealing to me. It’s subtle and at the same time has a huge impact on the design.
The plugin is called Firefly by Motyar. It’s incredibly easy to add to your site and can really bring the design to life.
To add it on your website you will first need to include your jquery file, you can download the recent version of jquery from the site http://jquery.com/.
Once you have that installed head over to the plugin page on GitHub and download the plugin https://github.com/motyar/firefly.
Once you have both javascript files, simply include them in your code like so:
And then call the plugins function with this:
$(document).ready(function() {
$.firefly();
});
The plugin allows for customization with two options ‘images’ and ‘total’. Images, lets you call whichever image you want to float on the screen. Total, allows you to define the amount of images to pull onto the screen at a time.
$(document).ready(function() {
$.firefly({images : ['1.jpg', '2.jpg'],total : 40});
});
And that’s it, you now have floating pixels on your website. You can use this plugin to add particles to a photography site, add fireflies to a field background image, add water debris, stars… the list goes on, its use is only limited by your imagination. Here are a couple example sites:
Quazar Web Design
FireFly
How do I implement this in a wordpress theme on my site?
Hi Sam,
If you want to add this into your theme you can do it through the Appearance tab in the WordPress dashboard. Simply go to Appearance then Editor and select either the theme header or footer, I would suggest the footer. Then just add the code that I talk about in the post just before the tag.
You’ll need to make sure you have the javascript files in a “js” folder in the root of your site.
Good Luck,
Jon
wow this is what i need. thank you so much, but the position seem not fixed on my site. how to make the position fixed? this is my site http://rosids.tumblr.com
sorry, i just now change the position code on .js file, then it fixed. thanks.
I have failed to get this to work on a WordPress site. If anyone has a site using this effect, I’d love to see it.
Never mind- figured it out using http://jsbin.com/userip/59/edit
Thanks you !
Hi… this is great and simple!
Question: is there a way to apply this effect only to a DIV container?
if not, is there a way if the user clicks some link the effect fades away?
Thank you for your code
Why not use v0.2?