外掛說明
這是 WordPress 的 tsParticles 官方外掛。
這個外掛可輕鬆建立具備高度自訂性的粒子、五彩碎紙及火花動畫,並且將這些動畫設定為網站背景,同時也提供了 Web Components、Vue.js (2.x 及 3.x)、Angular、Svelte、jQuery、Preact、React、Riot.js、Solid.js、Inferno 立即可用的元件。
tsParticles 官方網站 (包含線上選項編輯器):https://particles.js.org
官方網路社交聯絡管道:
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
適用於區塊編輯器
這個外掛提供 1 個可供 Gutenberg/區塊編輯器使用的區塊。
- 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.
安裝方式
- 將外掛安裝套件解壓縮所得的
tsparticles-block
資料夾上傳至網站的/wp-content/plugins/
目錄中,或在 WordPress 管理後台的 [外掛] 畫面中直接安裝外掛。 - 在 WordPress 管理後台的 [外掛] 選單中啟用外掛。
常見問題集
-
在哪裡可以找到這個外掛的設定?
-
前往 tsParticles 的官方網站 (https://particles.js.org),然後使用線上編輯器匯出設定。
-
何處可以取得技術支援?
-
可尋求技術支援的管道:
使用者評論
這個外掛目前沒有任何使用者評論。
參與者及開發者
變更記錄
= 2.9.3