Download Source Files
Cosmic pictures are used on many websites as a background image. Those pictures are undoubtedly beautiful, but after all they are still static images which provide little liveliness. With jQuery, we can bring a still cosmic image to life by adding some space dust (particles) flying like fireflies.
In this Premium tutorial, we’ll review how to mimic the effect shown here in thirty minutes. We’ll learn a bit of object-oriented JavaScript techniques as well. Signup for Plus!
Thanks so much to Vision-Media for providing the inspiration for this tutorial!
Join Tuts Premium
For those unfamiliar, the family of TUTS sites runs a premium membership service called “Premium”. For $19 per month, you gain access to exclusive premium tutorials, screencasts, and freebies at Nettuts+, Psdtuts+, and Vectortuts+! For the price of a pizza, you’ll learn from some of the best minds in the business. Join today!
- Subscribe to the Nettuts+ RSS Feed for more daily web development tuts and articles.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Piao Yishi
Getting Good with JavaScript
Learn how to liven up your webpages, from start to finish. Veteran Nettuts+ author Andrew Burgess helps you Get Good with JavaScript.
Join our newsletter!
UberMenu - WordPress Mega Me ... only $16.00 
RoyalSlider – Touch-Enable ... only $12.00 
Onvo Media - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Demo looks great.
You had me at JQuery…. downloading now..
oh, that would make a nice little touch!
I could definitely find some way to possible implement this into a project one day. Never done anything like this before so maybe I will learn something new.
Damn, this made me sign up for a Plus membership! Thanks!!
Yeah, you got ripped off.
This is not working in IE.
It’s my fault guys. window.innerWidth is not supported in IE. The correct way of getting the size of a browser window is through $(window).height() and $(window).width().
will u correct this in the tut /source files?
i didnt checked yet, so not sure what to change to get it right, wont have time till this sat.
the fx is sweet, give me lots of different ideas, thanx for this tut
Yes – the source is being updated. :)
:) thanx
This looks really great. I had build one, too after seeing this nice site:
http://cliframework.com/
Cool
Yes! I saw that site too. It’s why I decide to write this tut :)
This site : http://cliframework.com/
does not show the stars in IE (I have IE 7). and gives JavaScript error.
Pretty neat effect on that site, but now look at your CPU cycles.
Yes,
You tutorial code takes Firefox from 45MB in memory to 115MB.. and more than 50CPU cycles.
http://cliframework.com/ is still better, takes from 45MB to aound 55MB and less CPU cycle.
Also, as I am not a Plus Member, I tried to fix the IE issue using $(window).width() whereever window.innerWidth was used, and not it does not gives JS error, but also does not do the anumation stuff !
Any help on this would be appreciated.
Brownian motion…random walk…fractals…dynamics…aahhh
cool!
I think It’s time for me to join Tuts Plus!
Thanks for the tutorial.. I’ve been meaning to take at look at how this kind of animation is done but I haven’t had the chance. Great tut!
This would look even more awesome on a biology related website…showing microbial growth or RBC movement..so much can be done!!
Great tutorial. I love the idea of using jQuery to do simple animation – this technique is subtle yet very effective. Well done.
Would like to see more of these jQuery tutorials. Quality effort!
I hope the explanation and theory behind this tutorial is really good because the effect really doesn’t wow me, even if that’s true, I think the days of these ‘flashy’ effects are dead and gone.
totally agreed
First of all, I think you should state in your tutorial that this code is identical to the code at http://cliframework.com aka you got it from there… and yes, they were the first ones with the code, so the code is copied from them and it only has some variable and function name changes, that’s all. I suggest u all view the source of this demo and source of cliframework and compare it. I don’t even know how this tutorial became a plus tut. And BroOf is stating that he made the cliframework.com using this tutorial, cliframework.com site has been out for ages… with this effect! I think Jeffrey should think about this tutorial…
And no, cliframework is not my site, I’m just saying…
I think you may have misunderstood BroOf. I believe hes was trying to say he built one after seeing the cliframework.com site…. not that he built the site.
But I do agree… not worthy of a plus tutorial…
Yes… I see now, I misunderstood him, sorry BroOf. :)
Yeah it is the same. I say pull it.
Hey guys. Thanks for letting me know. I’ll look into the code and make a determination. Thanks, guys! You’re the best. :)
Yes, its exactly the same code, even the particlesX.png are same as SparksX.png in http://cliframework.com !
I still believe its good to learn such techniques/and web designs, but this is a complete rip-off of http://cliframework.com website.
Hey guys. The creator of cliframework is aware of this tutorial, and is okay with it. :)
broOf said that he used an effect like this AFTER seeing the http://cliframework.com/ website… what’s wrong with your eyes ?
“window.innerWidth is not supported in IE. The correct way of getting the size of a browser window is through $(window).height() and $(window).width().”
Can you update the Source with this
I have to agree with Blaz on this. This is not only plagiarism but it is also asking people to pay for stolen ideas.
There’s nothing wrong with taking their code and make it into a tutorial so other people can achieve the same great effect. But asking people to pay for it and not even saying that you stole the code from someone else’s site? Come on now. If it was my site I would sue you.
@i-rick: you just got ripped off
Nice effect… I can see it being used in certain applications, but the fact that firefox shot my cpu up to 99% with this made it a little less pretty. I haven’t tried it with any other browsers, the strain may be a little less with them.
wow. this looks like a bite to me.
I’m no jQuery expert, but I could muddle through someone else’s code and make a tutorial out of it.
+1
Demo looks wicked
It’s a dust effect. What’s the big deal?
You could always use my open source jQuery plugin http://mattkirman.com/2009/05/20/jquery-plugin-rfsparks/ which does exactly the same thing.
Plus, your code looks suspicously similar to the code found at http://cliframework.com/app.js – certainly not something I’d expect from a “Plus” tutorial.
Wow !!!
This is great.. Just after I saw the above tutorial, I have been looking for a “jQuery Plugin” replacement for the same. Reason, the code in the tutorial is too heavy on performance.
I have not used your plugin, but I hope that it would be much lighter and good on performance.
Just FYI… the tutorial code takes around 115-200MB of Memory to run on firefox and around 50CPU cycles.
Thanks a lot “Matt Kirman” for creating such a plugin !
Also. hope your plugin will run without much issues on IE as well :)
Thanks NetTuts for bringing up this tutorial, atleast now we have information on such great plugins.
Getting it going in IE is easy: Make the jQuery-functions a variable and replace window.innerWidth and window.innerHeight by those variables:
Hope this code-lines will be display correctly:
var one = $(window).height()
var two = $(window).width()
this.pointX = randomInt(two – 100);
this.pointY = randomInt(one – 100);
Yeah, just replace the original two lines by these four. I am a beginner so I am very proud now!
Just to confirm as i cant get this to work:
Replace:
this.pointX = randomInt(window.innerWidth – 100);
this.pointY = randomInt(window.innerHeight – 100);
With:
var one = $(window).height()
var two = $(window).width()
this.pointX = randomInt(two – 100);
this.pointY = randomInt(one – 100);
Not working for me?
Thanks
Check it out guys! I just finished painting this!
http://tinyurl.com/pdw8uc
Seriously, man? Grow up and develop your own applications. I can see if it was a similar concept design, but damn you’ve copied everything line by line and just changed around naming conventions…
SO not worthy of a Plus tutorial. Not even a standard tut if you’re not going to give credit where credit is due.
cliframework.com is my site lol, he contacted me so no worries there. I do not mind the article remaining, however the code is over 2 years old, and could be far more elegant. If Envato will pay me as well since they pay $150 or whatever per article, then I dont mind it staying, hell I might even refactor it a bit. If not then it will be removed.
Amazing if you made this originally… Hats Off to you :)
its very simple :P this is over 2 years old as i mentioned, could be far more elegant
Wow, you really thought a lot before making this kinda thing.. Looks damn interesting.. will try to make something similar to this :P
The loving it, i haz it. I gotta find something to use this on
I’m not sure that I understand the logic behind removing this tutorial. I think the goal here was to demonstrate this effect and teach users how it works… whats going on under the hood so to say.
If this were a code snippet for sale on themeforest or if this were released as an original jQuery Plugin I would say there is a problem but since this is a code tutorial I don’t quite understand where the problem is especially since the author clearly states he is reviewing how to mimic the effect on the CLI web site.
Are you guys saying that a tutorial must teach users something unique which was solely developed by the tutorial author and that authors may not teach you how someone else’s code works or how to use it?
I can understand the concerns here but I’m not sure I understand the reasoning.
No, we are not saying that it needs to teach us something unique, but the original tutorial was without that text that states that this effect is from cliframework and the code was clearly copied, that’s why we posted our comments… It’s now ok with the cliframework author.
…. ah, I understand. I’m glad it worked out.
Ok.. now as everyone is OK with this tutorial, can anybody help in omproving the performance of this code.
Its toooo heavy on performance.. around 50CPU cycles and 115- 200MB memory on FireFox 3.5.3 (they claim its the best firefox ever !!).
As I said earlier, this is a great technique to learn. But will not be of much use if its takes so much on performance !
Interesting effect, definitely, and I bet the code behind it is interesting. That’s what to take from the tutorial, guys.
It also makes me smile sometimes how people want to take a tutorial and implement an effect directly in their own site. I’ll take that, take that, take that, and mash ‘em all together and crank something out :)
The impact on CPU usage is an issue; perhaps for something like this, Flash may be more appropriate.
It could be much more efficient. Perhaps I will re-write the implementation on my site (http://cliframework.com), which is super old. It does not need to be this slow, there are several ways to speed it up although it would still not be incredibly efficient
I don’t understand why this is a PLUS tutorial.. Theres free jQuery plug ins out there that do the same exact thing.
There are also place where you can buy complete websites. So why even learn how to code one?
Is there any way this thing can be turned off or toggled? or at least on the click of a button remove a few particles?
I really like this one. The only little problem is, that this effect seems to be limited to the viewable area. If the size of content makes you scroll down, the effect stays at the top of the page.
I’d really appreciate an extension so that this really nice effect is spread all over the accessable content of a website ;)
Ok, I fixed it myself. Maybe it’s not the best or fastest way but it works ^^
The only stuff I’ve added may be familiar to the most of you:
Spark.prototype.pageSize = function(){
var xScroll, yScroll;
if (window.innerHeight && window.scrollMaxY) {
xScroll = window.innerWidth + window.scrollMaxX;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac…would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}
var windowWidth, windowHeight;
if (self.innerHeight) { // all except Explorer
if(document.documentElement.clientWidth){
windowWidth = document.documentElement.clientWidth;
} else {
windowWidth = self.innerWidth;
}
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}
// for small pages with total height less then height of the viewport
if(yScroll < windowHeight){
pageHeight = windowHeight;
} else {
pageHeight = yScroll;
}
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth){
pageWidth = xScroll;
} else {
pageWidth = windowWidth;
}
var arrayPageSize = new Array(pageWidth,pageHeight,windowWidth,windowHeight);
return arrayPageSize;
};
Spark.prototype.pageScroll = function(){
var xScroll, yScroll;
if (self.pageYOffset) {
yScroll = self.pageYOffset;
xScroll = self.pageXOffset;
} else if (document.documentElement && document.documentElement.scrollTop){ // Explorer 6 Strict
yScroll = document.documentElement.scrollTop;
xScroll = document.documentElement.scrollLeft;
} else if (document.body) {// all other Explorers
yScroll = document.body.scrollTop;
xScroll = document.body.scrollLeft;
}
var arrayPageScroll = new Array(xScroll,yScroll);
return arrayPageScroll;
};
… and of course changed the assignments of the start locations:
Spark.prototype.newPoint = function() {
var arrayPageSize = Spark.prototype.pageSize();
// calculate top and left offset for the lightbox
var arrayPageScroll = Spark.prototype.pageScroll();
var sparkTop = arrayPageScroll[1] + (arrayPageSize[3] / 10);
var sparkLeft = arrayPageScroll[0];
this.pointX = this.random(arrayPageSize[0])-150;
this.pointY = this.random(arrayPageSize[1])-150;
return this;
};
Feedback is always welcome xD
Love this effect. However, I’ve got a sweet navigation menu that work fine until one of the fireflys cruises behind it. I’ve got my z-indexes setup correctly, but every time a firefly comes close to the nav link that I’m hovering on, the firefly takes precedence and the link is temporarily not available until the firefly clears the link area.
How can I fix this?