tsParticles v1.16.0
Release Notes
- Added
bubble
mode todiv
events - Added
type
fordiv
events,circle
orrectangle
are the values, it represent the div shape - Renamed
elementId
property inonDiv
object toids
-
div
events now are more configurable, theonDiv
property accepts a single object or an array of that object and thedivEvent
object supportsids
property with single string or an array of strings -
bubble
andrepulse
modes have a newdivs
property which is a similar object (or anarray
of it), it hasids
(string
orarray
) instead ofdivs
for configure custom configuration for each div. - particles
move
has a new propertyangle
(degrees value) to configure the width of spread when it's not set tostraight: true
andrandom: false
. Defaults to90
which is the previous behaviour. - Two new
collisions
modes:absorb
anddestroy
, the first merges two particles, the second one destroys the smaller one, if equal they will be destroyed both. -
detectRetina
is nowtrue
by default -
noise
is now a simpler object: onlydelay
object andenable
property are kept. Other properties have been removed for external noise management. You can now specify your own noise using the methodsetNoise
on particles container. - All
tsParticles
packages (react-tsparticles
,particles.vue
,ng-particles
,jquery-particles
,preact-particles
) are now part of this repository thanks toLerna
Some Pens of the new features
Euro flags with Divs interaction
External Noise Generator
External Noise Generator with noise field drawn
tsParticles plugins
tsParticles
supports customizations 🥳.
YOU CAN CREATE YOUR OWN SHAPES OR PRESETS
Related projects
jQuery
If you want to use tsParticles with jQuery checkout this repository
VueJS
If you want to use tsParticles with VueJS checkout this repository
ReactJS
If you want to use tsParticles with ReactJS checkout this repository
3rd Party
A 3rd-party component is available too, read more here
Preact
If you want to use tsParticles with Preact checkout this repository
Angular CLI
If you want to use tsParticles with Angular CLI (actually v9) checkout this repository
Useful links
Checkout the demos here: https://particles.matteobruni.it
Do you want to replace the old, outdated and abandoned particles.js
?
You're in the right place!
GitHub repo
https://github.com/matteobruni/tsparticles
npm
https://www.npmjs.com/package/tsparticles
yarn
https://yarnpkg.com/package/tsparticles
jsDelivr
https://www.jsdelivr.com/package/npm/tsparticles
CDNJS
https://cdnjs.com/libraries/tsparticles
Feel free to contribute to the project!
Demos
Here are some demos!
Custom Presets
watch the code for creating custom presets
Custom Shapes
watch the code for creating custom shapes
Characters as particles
FontAwesome characters as particles:
Mouse hover connections
Polygon mask
Background Mask particles
Polygon Mask with multiple paths
This polygon has 4 paths
Emitters
This login background is made with particles emitters, cool isn't it?
Absorbers
Have you ever wanted a black hole? Here's yours!
Collisions
The collisions in the previous releases, and in Particles.js too, were horrible. Now they're fixed and they look good. Finally!
Twinkle effect
Particles twinkling
Noise trails
Infection
Growing particles
Simplified addParticle
method
Links with triangles filled
Color animations
Warp out mode
Click play/pause mode
COVID-19 SARS-CoV-2 particles
Don't click! DON'T CLICK! OH NO IT'S SPREADING!!!!
COVID-19 is not funny. It's a serious world problem and we should prevent its spreading. If you are in a risky area please STAY AT HOME
Top comments (0)