This page provides an overview of all options the NextParticle library provides.
Please note: Press the rerun button on the codepen previews to interact with them.
imgtag with the class
next-particlewill be automatically initialized with the NextParticle script.
The width and height of the created
canvasequals the size of the image.
NextParticle can be initialized by passing an
imgelement to the NextParticle constructor. The params which are present on the image tag as data attributes are automatically used.
Please note: Data attributes are ignored when params object is passed.
NextParticle can also be initialized by passing an params object. The image needs to pe passed as
The size of the
canvascan be adjusted by
The particle image within the canvas tries to be as big as possible while keeping its aspect ratio, but will not get bigger than the natural size of the source image.
Please note: The canvas size also affects the render performance - even when the amount of rendered particles is not changed.
The size of the particle image can be controlled by
minsizes the image can be stretched above its natural source image size.
maxsizes limit the image size within the canvas.
The sizes can all also be passed as relative to the current canvas size by passing
particle-gapattributes defines the space between particles. The minimum value is
1. With this setting, the particles are all next to each other.
Please note: The performance is massively depending on the amount of particles - the higher you choose the gap between particles the smoother the animation will run.
gravitydefines the force which makes the particle going back to its origin position and also affects the moving speed.
The particles can be tinted with the
colorattribute. This overrides any color given by the provided image.
mouse-forcedefines how many pixels the sourrounding particles get pushed away. You can also use negative numbers to attract particles instead of pushing them.
The particles are constantly moving with default settings. The strength of this movement can be ajusted with the
noiseattribute. The particles are moving faster and for a larger distance with a higher number. The movement can be completely disabled by setting it to
0but this is not recommended.
The Interaction with cursor or touch events can be disabled by setting
Since Version 1.1 NextParticle also supports WebGL rendering. To enable this you need to set the
webgl. You can do this either by data attributes or by js.
WebGL also enables multiple new settings wich are not available with the
Changes the size of the particles - values should not be lower then
0.5and not higher then
WebGL renders the particles within an 3D space internally. This allows to render particles in multiple layers. Please note: High numbers of layers decreases the performance.
depthcontrols the distance between and the distance to the background.
With WebGL enabled you can give the particles an life cycle. This means an particle grows at it source position, waits then and shrinks afterwards. The shrink can have an distance from the center.
The initial and the fading particles position can be set by
The possible values are
Please note: Click on the image to see the animation.
The width and height can be set while the animation is already runnung, but
.start()needs to be called to apply the changes.
The animation can be controlled by
.stop(). When the animation has completed the stopping animation it triggers the
Add Newto start the Plugin installation.
The Plugin should now be listed as seen on the screenshot.
You can use the NextParticle Plugin everywhere where you can embed an image. Edit for example an existing page and click on
Add Mediaand add the image you want to use for NextParticle.
Select the inserted image and click on the edit icon.
Every image has now an
NextParticlesection where you can enable the effect and tweak some properties.
The admin page will still view the image. You can save now the page and take a look on the blog page to see the effect.