tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
MIT License
Bot releases are hidden (Show)
Published by matteobruni over 2 years ago
Engine
instance singletons, this is useful for multiple instances installations since they can behave differentlydomId
property to Emitters options, setting that to match a real dom element id will attach the emitter to the element (closes #2256)react-particles-js
, but I decided to not change the major version since all the official components will continue to work as expected.Published by matteobruni over 2 years ago
Published by matteobruni over 2 years ago
Published by matteobruni over 2 years ago
Published by matteobruni almost 3 years ago
Main
class to Engine
, kept backward compatibilityPublished by matteobruni almost 3 years ago
tsparticles-canvas-el
), replacing it with a data attribute. This will break some CSS, but I'd prefer breaking it for focusing more on optionsstyle
options, they are applied directly to the canvas
, it's the same .style
object of the standard JavaScript HTMLElement class (docs here)Published by matteobruni about 3 years ago
Published by matteobruni about 3 years ago
Published by matteobruni about 3 years ago
Published by matteobruni about 3 years ago
Published by matteobruni over 3 years ago
Published by matteobruni over 3 years ago
Published by matteobruni over 3 years ago
roll
, tilt
, wobble
)dist/
folder has been removed.dist/
folderimport
)In most cases this change will affect only who are using internal imports.
This tsparticles/dist
can be safely replaced to tsparticles
.
This will affect also everyone using tsParticles with CDNs since the dist
folder is no longer part of the path, but if it's copied from the CDN website it's fine.
wobble
, tilt
and roll
These three new particles options sections will create a wonderful and realistic confetti effect to all particles. You can use any shape
with these effects, even external ones, self-created or not. The only one not compatible is confetti
because it's been replaced by these properties.
What do they means?
Roll makes particles roll on their y
axis. They look like they're falling rolling on themself. In these options you can set a back color (that will be visible when the particle has flipped).
The color is optional and a darken
or a enlighten
section can be alternatively configured.
The reading values order is:
So if enlighten
and darken
are both specified, only darken
will be read.
darken
and enlighten
have a value
and enable
, the first will subtract the luminosity of the color for that value, the second will add it, only if the enable
value is true.
Tilt is responsible for particles deformation, the particles will be tilted following the specified parameters. This is not animated by default, the options are similar to rotate
, they don't have path
since is not valid here.
If a value is set all particles will be tilted for that angle (both horizontally and vertically using cos
and sin
functions), when animated the angle will be increased or decreased, depending on set direction.
Wobble is the horizontal movement that simulates the air resistance. The particles will bounce from left to right with a configurable speed
and distance
.
Published by matteobruni over 3 years ago
Published by matteobruni over 3 years ago
Published by matteobruni about 4 years ago
prefer-reduced-motion
users, it can reduce or disable animationssync
false in 1.17.0 used a random color instead of a random speed. This is fixed in 1.18.0 but you need to use the random
value in color and not sync: false
to achieve the same effect.Published by matteobruni about 4 years ago