ParticleJS Atom Documentation

A lightweight Gantry5 Atom for creating particles. See how ParticleJS can be designed beautifully on Demo Page. 🙂

# ParticleJS Atom Package contents

Files Description
jlparticlejs.yaml Contains the ParticleJS Atom settings.

jlparticlejs.html.twig The Twig file to pull information, settings.
particles.min.js Contains the ParticleJS JavaScript.

Installation Installing the particle on your website is a really simple process. You can refer to the document here to know more.

After you upload and implement this atom, go to your Template/Theme Settings > select the Layout to add ParticleJS (i.e: Home) -> Page Settings -> Darg the ParticleJS Atom into Atom Box.

Settings

Settings Description
Hover styles Select Hover styles.
Click styles Select Click styles.
Items List particlejs items to animate. You can add new items to the collection using the plus + icon

Step 1 Open ParticleJS Atom, you can add new items to the collection using the plus + icon

Item Setting Description
Element ID Enter your unique Section id for creating particles.
Style Choose the preset style.
Number Enter the number of particles.
Default Style: Default 70, Polygon 8, SnowDrop 490.
Speed Enter the speed of particles movement.
Default Style: Default 5, Polygon 8, SnowDrop 1.
Out mode Choose the mode when particles touch the edge.
Z-index Enter the z-index css for particles. An element with higher z-index is always in front of lower element.
Custom Json code Configure, export your particles.js configuration here https://vincentgarreau.com/particles.js/ using custom control then past the json code into custom json code textbox.

Here an example

Tips With Gantry 5, you can define the SECTION ID by following: Adding the g- prefix before the section name. Example with showcase section, the section id should be: g-showcase

Quick Config You can configure, export Json file (format) and place your configuration code into custom config box.

Go to Particlejs Homepage: https://vincentgarreau.com/particles.js/ , here you can build your custom Particlejs config, see the effect in live action then download the json file.

You can open .json format with any text editor like notepad or sublime text, then copy all code => paste to custom json code textbox like so (DO NOT forget to select Custom Style)

Video Tutorial

Comments

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>