0

I have a project for a client of mine. It involves something similar to the old me.com homepage (no longer up)

It looked similar to this though http://lokeshdhakar.com/projects/mobileme-particles/

I want to use HTML CSS JQUERY, and not flash ( she asked for flash, trying to tell her flash is a dying technology )

I have experience with jQuery but simple animations and fade type stuff - never particles and can't find a tutorial on it that speaks my language.

My goal is basically to make a splash page - with her logo in the middle, and the effect would be little particles similar to the URL example above - but going into the logo, not out.

Does anyone have any experience in this or maybe point me in a directions to where I can learn more about it..

I will have a working page up soon.. but wanted to maybe get this out there.

Thanks, -O

////////////////////// UPDATED Need more help //////////////////////

I have a working Demo. But need some help with the jquery

I have a fiddle http://jsfiddle.net/muhupower/cneJT/2/

  1. I can't figure out how to center the effect directly behind the big Logo...

  2. Also, after it's centered, when you resize the browser window, the effect does not stay centered.

  3. This is a little harder part, is it possible just to have a consistent effect with the particles rather then ever couple seconds it dies out and restarts?

This is an uploaded version also. http://lillystreet.com/demo/

MuhuPower
  • 404
  • 3
  • 25
  • I think particles in jQuery is bad practice. Mostly because the `.animate()` function uses a parameter called `step`. Step gets called (I believe, default is) every *17* milliseconds. If you have particles, you're probably going to have hundreds (if not thousands) of simultaneous animate functions going. This will result in huge client side performance issues. You can try altering the step to make it longer, but I still forsee issues. – Ohgodwhy Jul 25 '12 at 03:07
  • I thought I'd provide something constructive, as well: The link you sent is an HTML5 Canvas, [this jsFiddle example leverages HTML5 canvas](http://jsfiddle.net/Ohgodwhy/7VYY2/) and you can see what's going on. The credit for that effect goes out to - [thecodeplayer.com](http://thecodeplayer.com/walkthrough/html5-canvas-experiment-a-cool-flame-fire-effect-using-particles) – Ohgodwhy Jul 25 '12 at 03:14
  • I enjoy the jsfiddle, I will continue to mess with that to maybe get the effect I am looking for. QUESTION? is this noted by huge client side performance going to be a big issue? I plan on letting it be a very light weight particle effect.. not many particles, not much going on other then 100 or so gravitating towards the logo slowly.... – MuhuPower Jul 25 '12 at 03:33
  • Get out an old P4 Desktop, or a first generational Duo-Core (not Core 2 Duo) and run the site, check for yourself. It's difficult to theory a response because of the variables. – Ohgodwhy Jul 25 '12 at 03:41
  • **FYI:** The link in your Question hits Firefox v14 with a large CPU spike up to 23% on a XP machine with 4 cores. – arttronics Jul 25 '12 at 04:33

1 Answers1

0

I made a very simple plugin for this kind of effect.

Here is demo

Pierre de LESPINAY
  • 44,700
  • 57
  • 210
  • 307