Particle Animation effect in HTML5 n CSS3

Question

I am trying to create an effect like what I have shown in the video below: http://www.youtube.com/watch?v=gSk4AWvnG8Y&feature=youtu.be

this effect was created in Flash, but I wanted to replicate it (to as much as possible) in HTML5 and CSS3.

I have not done any thing like this before. So wanted to see if someone can help me suggested how I can do it.

Thanks Zeeshan

Answer 1

Well Spider is kinda right. There are tons of canvas demos describing such particle effects:

• http://codepen.io/soulwire/pen/Ffvlo (found here: >)http://davidwalsh.name/canvas-demos)
• http://gwtcanvasdemo.appspot.com/ -https://developer.cdn.mozilla.net/media/uploads/demos/b/o/boblemarin/5cfea13ba1397f696bea7b2ff62c0188/fluid_1339407870_demo_package/index.html (found in mozilla labs: https://developer.mozilla.org/en-US/demos/detail/fluid)

etc. (just do a quick google Search).

Doing this with CSS is not possible since you can't track the exact position of the mouse can't create this dependend effect, etc.... and Canvas is HTML5.