Discussion on Magic Dust: HTML Particles


artrayd supports this item


7 comments found.

Looks interesting. How does it work? Could it be used in every html-page or even in WP? And is it limited to the effects of the demo?

Thanks, Bernhard

Hello hiegl,

Effect is based on canvas element. With simple js parameters you can adjust count, size, color, speed and other properties of particles.

Than place canvas element with HTML and CSS anywhere in document, just as you place buttons or div. Canvas is regular HTML element.

It can be used on every HTML page, even in WP :) Maybe we will create MagicDust WP native implementation later.

It’s not limited with effect from demo, the only limit is your phantasy.

Thank you for interesting in MagicDust plugin, Artrayd

Nice Idea! Although I don’t need it, I wish you luck with your sales :)


Thank you :)

- Artrayd

really useful stuff, good job ! :)

Thank you Eric,

Currently we are working on next effect. Keep following :)

Hello, do you make custom development? I sent you an email.



Thank you Zivushka,

I hope you got our answer back.

Hi, Nice script! Is there any simple way to make animation from top to bottom (like snow)? Please let me know,

Thank you.

Thanks! You can do this with CSS transform property.

Hi Artrayd,

Would it be possible to use this script on a 100% width canvas within a WP website, with the particles moving from left to right?

Hi ellumination,

You can rotate whole canvas particles element with CSS. For example:

canvas#yourID{ transform: rotate(90deg); }

So particles will move from left to the right, also you can make it 100% of screen width, it’s fully responsive.

Hi Artrayd,

Thanks for your reply! 1. Won’t rotating the canvas within a DIV mess up the layout? 2. Is there a parameter to adjust the directionality of the particles? I.e. now they all follow a straight line, is it possible to have the particles deviate from the straight line, so a more organic floating of particles, like for example the particles.js from vincent garreau?

Hi ellumination, sorry but it’s not possible in current version. But we will think about this feature, thank you a lot for feedback.

Great work!

Can I change the direction of the particles falling (from top to bottom)?

Thank you SpakyFlash,

To change particles direction just flip div div with particles with CSS transform: scaleY(-1);