Maak prachtige geanimeerde deeltjes met deze Javascript-bibliotheek
Er zijn talloze gratis animatiebibliotheken met allemaal verschillende effecten en specialiteiten. Maar de nieuwe bibliotheek Particles.js gaat een totaal nieuwe richting in door te creëren geanimeerde deeltjes dat verplaats in real time helemaal over de pagina.
Deze eenvoudig te gebruiken bibliotheek is volledig gratis en open source op GitHub. Het zal zeker niet helpen de UX van je site te verbeteren, maar het kan je helpen er een paar toe te voegen interlaced deeltje-effecten naar de achtergrond.
Op de hoofdpagina vindt u een live interactieve demo waar je kunt spelen met de functies van de bibliotheek. Hiermee kun je de deeltjesgrootte, snelheid, vorm, kleur, positie aanpassen, noem maar op.
Omdat dit zo'n gedetailleerde bibliotheek is, heeft het een goed begrip van JavaScript om het te laten werken. Daarom is deze live demo zo waardevol omdat iedereen hiermee kan spelen met deze instellingen om te zien wat er mogelijk is in JavaScript.
En als het goed gaat met het exporteren van deze afbeeldingen, dan kan dat sla de afbeeldingen rechtstreeks op van de demo-pagina van de web-app. Jij kan exporteer een onbewerkte PNG of zelfs sla al uw aangepaste instellingen op in een JSON-bestand dat vervolgens rechtstreeks in het script Particles.js wordt geïmporteerd.
U kunt standaard kiezen uit een kleine handvol thema's met verschillende deeltjesstijlen:
- NASA sterren
- Bubbles
- Sneeuw
- Nyan cat stars
- Standaard geometrische vormen
Met deze standaardwaarden kun je nog steeds bewerk alle hoofdinstellingen om kleuren, posities, snelheden en al het andere te verfijnen.
Het beste deel van deze hele bibliotheek is de live aanpassingsfunctie rechts op de hoofdpagina. Als je de details wilt weten, moet je echt weten wat JavaScript en frontend-codering zijn.
Maar zelfs een beginner kan via de interface werken, de gewenste instellingen kiezen en alles exporteren als een JSON-bestand.
Een schitterende bibliotheek voor iedereen die ernaar kijkt maak dynamische deeltjes op het web. Ga voor meer informatie naar de GitHub-repo en deel uw mening met de maker Vincent Garreauon op Twitter @VincentGarreau.