Actions
Switch Theme
Getting startedInstallation
Basics
SocialsYouTube
Facebook
Jose Tamu
July 16, 2024 /  Intermediate

Particles

How it works

Particles is a nestable block element. You can put any elements at it and edit it’s display settings at the Style tab.
Particles element is built on top of the popular particlesjs library.

Particles controls

Number: The amount of particles to generate. The demo uses 160.
Enable density: If enabled, it enables the density calculation for particle distribution. This means that the number of particles will adapt based on the size of the canvas, ensuring a consistent density of particles regardless of the canvas dimensions.
Density: defines the area in which the density is calculated. It is measured in pixels. The larger this value, the more spread out the particles will be. Essentially, it controls how many particles are present per unit area of the canvas.
Shape: determines the shape the particles will take. They can be combined at pleasure. There are 6 types: circles, edges, triangles, stars, polygons and image.
Opacity: determines the opacity of the particles.
If random is enabled, opacity will be assigned from 0 to the opacity value set randomly to each particle.
If animation is enabled, opacity will be animating constantly from 0 to the opacity value set.
Size: determines the size of the particles.
If random is enabled, size will be assigned from 0.25 to the size value set randomly to each particle.
If animation is enabled, size will be animating constantly from 0.25 to the size value set.
Line linked: if enabled a line animation will be set linking particles when colliding. You can customize its styles and the distance collision.
Move: if enabled, particles will be moving constantly at the canvas. There are many controls to customize the movement animation:
Speed: determines the movement duration.
Move direction: if there is a direction the particles should follow instead of moving randomly.
Move out: out or bounce. If bounce, particles will collide with the walls instead of going out.
Enable attract: if enabled, particles will attract with each other when moving, modifying their directions.

Interactivity controls

Enable hover: if enabled, an animation can be selected to occur when a particle is hovered. Animations available: repulse, grab and bubble.
Click animations: push, remove, bubble and repulse.
Hover animations: if enabled, an animation can be selected to occur when a particle is hovered. Animations available: repulse, grab and bubble.
Click animations: repulse, grab and bubble.

All of the animations can be customized at their sections: speed, distance, number and much more.
Customizations will be shared at both click and hover, so customizing repulse will modify it at hover and click.

– Tamu

On this page