Description
Official tsParticles WordPress Plugin
Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website.
Ready to use components available also for Web Components, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, React, Riot.js, Solid.js, Inferno.
Official tsParticles website with options editor: https://particles.js.org
Official Social Channels:
Bug Fixes
- Fixed some plugins, they weren’t loading correctly the options
= 2.9.2
Bug Fixes
- Added missing shapes to confetti bundle
- Fixed issue with emitters plugin that spawned an unwanted emitters, fixes #4905
= 2.9.1
Bug Fixes
- Fixed missing plugins in wordpress component
- Fixed confetti bundle package.json
- Fixed confetti.create function in confetti bundle
= 2.9.0
New Features
- Creating confetti bundle, easier confetti animations usage. Removed
confetti
function from the preset, this bundle replaces this feature. - Creating fireworks bundle, easier fireworks animations usage.
Minor Changes
- Added version to the
Engine
object. - Added
color
andcolorOffset
properties tosplit
options. - Changed default particles
number
value to0
, the previous default value was meaningless. You must specify a number now, it’s easier to implementemitters
plugin since you can declare just theemitters
property without specifying0
particles. If you need any number, you declare it ignoring the default value.
= 2.8.0
New Features
- Reworked move.trail options, created a
fill
property that is an object with color and image, closes #4882
Bug Fixes
- Fixed polygon mask position issues
- Fixed polygon mask scaling issues
= 2.7.1
New features
- Added loop options to sounds audio values
- Added volume buttons to sounds plugin
Other Changes
- Moved out some plugin specific code from the engine to the dedicated plugin
2.7.0
Bug Fixes
- Fixed issue with animation random size, multiplying again the pixel ratio
- Added missing export
EventType
- Fixed Engine package exports
New Features
- Added shape options to circle, added range (min/max object) values to polygon and star shape options
- Changed default file for slim and full bundles, using the bundled file
- Added support for multiple shape drawers declared at once instead of adding a shape drawer multiple times
- Added ranged values in stroke width and opacity properties
- Added loops count to color animations
- Improved density values, now is 1:1 with number on 1080p resolution with pixel ratio of 1 (this is not a breaking change since nothing breaks, but it changes the behavior of existing values)
- Density values now has width/height values instead of area/factor, for compatibility reason
width
is mapped toarea
andheight
tofactor
. - Created sounds plugin, with mute/unmute icons
- Added explosion sounds to fireworks preset
Circle Options
In particle.shape
now it’s possible to set another option to the circle
shape, angle
. The new property accepts a number
or a { min: number; max: number }
object, when only number
it’s going to be { min: 0, max: <value> }
.
This creates partial circles starting from min
to max
, both values must be specified in degrees. If this value is ignored the default value is: { min: 0, max: 360 }
(the full circle).
Examples
`
…
shape: {
type: “circle”,
options: {
circle: {
angle: 180
}
}
}
…
`
This examples creates horizontal half circles
`
…
shape: {
type: “circle”,
options: {
circle: {
angle: { min: 90, max: 270 }
}
}
}
…
`
This examples creates vertical half circles
Density options
The density options are changed a bit, instead of area
/factor
values, the width
/height
values are introduced and mapped respectively. The default values are changed to width
1920
and height
1080
, so on a FullHD resolution on device pixel ratio 1
the particles number is the one specified in the options. Since width
and height
are multiplied together, they can be swapped and nothing changes.
The formula for the density is:
(canvasWidth * canvasHeight) / (densityWidth * densityHeight * devicePixelRatio^2)
Notes on existing configurations
Since many configs had a density.area
value of 800
, you’ll see less particles, just a few less. If you have also a factor
value, you won’t notice any difference. When only area
is set, if you want to keep the previous configuration, set factor
to 1000
. Since the default factor
(height
) value is 1080
now, the difference should be barely noticeable.
2.6.0
Bug Fixes
- Improved angular component id management
- Fixed multiline text shape (and relative demo)
- Fixed issues with links colors and themes, fixes #4841
New Features
- Added new resize object to interactivity options, can change the debounce delay, fixes #4803
- WordPress plugin is now localizable, closes #4807
Other Changes
- Fixed dependencies charts on README files, closes #4763
- Added reset to path generators, this fixes issues with sea anemone and polygon path plugins
2.5.4
New Features
- Added localization support
2.5.3
Bug Fixes
- Fixed issue with reduce duplicates flag, fixes #4805
2.5.1
Bug Fixes
- Fixed issue with ES modules
2.4.0
New Features
- Added
reset
method to updaters, this method will be called after a particle loses a life. - Created the motion plugin for handling motion sickness, I moved this feature from the engine to a plugin since I prefer to have it more customizable. Everyone now can create their own motion sickness plugin, instead of having a standard behavior for everyone
- Added mutation observer to avoid style changes to the canvas when the
fullScreen
option is enabled (default behavior) - Moved all easing functions to plugin packages, slim now depends on easing-quad since it’s the default value used in repulse and attract
- Added support for multiline text in canvas mask text options, separator and spacing are customizable values
- Added
aria-hidden="true"
to canvas element, fixes #4785 - Removed all canvas context save/restore calls, this should be a huge improvement to general performances
- Added the particles pool for reusing destroyed particles, every tsParticles instance will have its own pool
- Changed collision absorb code, added
absorb.speed
option tocollisions
section - Added delay to root options, fixes #4766
Bug Fixes
- Fixed infection plugin
- Fixed issue with polygon mask when particles bounce on the polygon edges
- Fixed issue with
rgb()
,hsl()
andhsv()
values in color option values
Other Changes
- Refactored plugins to avoid passing options in init functions since it’s no more necessary
- Removed
initAsync
function from plugins, standardinit
is now async for all plugins - Removed polygon mask plugin from the
tsparticles
package, this is a breaking change only for those that are using it. Since it’s a heavy plugin and not so much used, I have preferred removing it from thetsparticles
package. - Changed tsconfig target from es6 to es2019 (less transpilation to a reasonable target). The compatibility is still very high, reducing the bundle size.
2.3.5
Bug Fixes
- Fixed issue when loading Absorbers and Emitters options
2.3.4
Bug Fixes
- Handling “mid” value in links color value
- Fixed links id generation algorithm, it could improve links performances
Other Changes
- Moved some specific code to correct plugins
2.3.3
Release
2.3.1
Release
Screenshots
Blocks
This plugin provides 1 block.
- tsParticles WP Block Official tsParticles WordPress Plugin - Easily create highly customizable particle, confetti and fireworks animations and use them as animated backgrounds for your website.
Installation
- Upload the plugin files to the
/wp-content/plugins/wordpress-particles
directory, or install the plugin through the WordPress plugins screen directly. - Activate the plugin through the ‘Plugins’ screen in WordPress
FAQ
-
Where can I find particles options?
-
Go to the official tsParticles website https://particles.js.org and export options using the editor.
-
Where can I ask for support?
-
There are some ways to ask for support:
Reviews
There are no reviews for this plugin.
Contributors & Developers
“tsParticles WP Block” is open source software. The following people have contributed to this plugin.
Contributors“tsParticles WP Block” has been translated into 1 locale. Thank you to the translators for their contributions.
Translate “tsParticles WP Block” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
= 2.9.3