Particle.Js (a nyní tsParticle.js), zábavný způsob, jak používat plátno!

Particles.js

Už je to dlouho, co jsem slíbil, že si ušpiním ruce úžasnými věcmi, které dokážeme s plátnem.

Dnes jsem trochu ochutnal sílu konceptu plátna. Rozhodl jsem se použít opravdu krásnou knihovnu:Particle.Js

Byl to velmi vzrušující experiment. Moje demo je opravdu zásadní, ale uvědomil jsem si, že má obrovský potenciál pro projekty, ve kterých chcete co nejlépe využít design jako uměleckou formu ke komunikaci a vytvoření jiné... atmosféry.

Koneckonců, pojem plátno není nic jiného než výslovný odkaz na bílé plátno, které lze naplnit tím, co chceme...

Takže s Particle.Js je opravdu jednoduché mít ve svých rukou funkční, stabilní, čistý a přizpůsobitelný kód.

Jednoduše upravte své plátno pomocí nástroje, který Vincent Garreau (autor Particle.Js) zpřístupnil, a publikujte jej na Codepen. Odtud můžete ve svém projektu používat části Javascript, CSS a HTML.

Zbytek je postaven v div, který je hostitelem plátna.

Můžete nastavit všechna nastavení týkající se požadovaného počtu položek, interakcí při najetí myší, kliknutí a způsobů, jakými musí naše položky na tyto události reagovat.

Částice jsou dokonale přizpůsobitelné a dokonce i základ našeho plátna lze použít s jednoduchým CSS nebo obrázkem na pozadí.
Typy částic lze vybrat z rozbalovací nabídky, která nabízí výchozí částice, NASA, Bubble, Snow, Nyan Cat.

Particle.Js má v současné době 24 899 hvězdiček (včetně mého!), 282 vydání a 4 400 forků a je licencován pod MIT.

1) Zahrňte do souboru HTML knihovnu CDN a použijte soubor

<div id="particles-js"></div>

k získání obsahu HTML

2) Vytvořte si vlastní plátno s částicemi pomocí nástroje stránky na https://vincentgarreau.com/particles.js/

3) Zveřejněte jej na Codepen pomocí tlačítka Codepen vpravo nahoře

4) Ve vašem vlastním souboru JavaScript zkopírujte výsledek Codepen (stejné pro CSS)

Moje demo můžete najít na Codepen a GitHub

Jediná vada, kterou tato knihovna má, je, že již není udržována 😢, ale počkejte! Máme skvělé řešení 😎 ❤️ !!

tsParticle.js

tsParticle.js je knihovna s implementací opravdu podobnou Particle.js (takže není o moc odlišná nebo složitá než ta předchozí, opravdu!!), s novými funkcemi a velmi dobře udržovaná, vytvořená @matteobruni a vydaná pod licencí MIT a. .. to je také úžasné ✅!

Abychom pochopili, jak to implementovat, máme krásnou dokumentaci na Github.

Matteo ve svém článku píše:

Můžeme najít několik skvělých příkladů s tsParticles také na Codepen, jen abyste měli představu o potenciálu a můžete jej implementovat pomocí Vue, React a dokonce Angular. Pro Wordpress neexistuje žádný plugin, ale můžete použít tsParticle prostřednictvím Premium Addons pro Elementor (v sekci Premium Particles Add.on).

Doufám, že i vy se můžete zkusit pobavit s tsParticle.Js , a že vytváříte krásné vzory pro své projekty!😊 😊