What a tsParticles
patch release post? Are you crazy?
I don't usually post about tsParticles patch releases, but this time I'll do an exception.
A frequently asked question for tsParticles
and particles.js
was about using the library without breaking buttons, links, and any other interactive elements of the web page.
Well, thanks to version 1.18.11
this will be a lot easier and many configurations that were not possible before are now possible (Impossible is nothing, anyone?)
How to configure this awesome feature?
Your options will need some updates:
{
/* your awesome config */
backgroundMode: {
zIndex: 100, // any value >= 0 is good
/* if you want elements above particles
just set a bigger z-index in your css */
enable: true
},
interactivity: {
/* if you have detect_on, replace it */
detectsOn: "window" /* "parent" is still good
"canvas" won't work */
}
}
Demo
Want to see it in action because you won't believe this?
Check out below
You can see particles above
Read more
If you want to read more about all the 1.18.x
features you can read more here
GitHub
If you like tsParticles
support it with a ⭐️ on GitHub, you can find the link below
tsparticles / tsparticles
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.
tsParticles - TypeScript Particles
A lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible with React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components
Table of Contents
-
tsParticles - TypeScript Particles
- Table of Contents
- Do you want to use it on your website?
- Library installation
- Official components for some of the most used frameworks
- Presets
- Templates and Resources
- Demo / Generator
- Video Tutorials
- …
Top comments (0)