jQuery Wrapper For tsParticles Particle Library
File Size: | 5 KB |
---|---|
Views Total: | 2010 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

This is a jQuery wrapper for the tsParticles library to create pretty cool particles in your jQuery based web projects.
How to use it:
1. Install and download.
# NPM $ npm install @tsparticles/jquery --save
2. Load the jquery-particles plugin after jQuery & tsParticles libraries.
<!-- tsParticles engine --> <script src="https://cdn.jsdelivr.net/npm/tsparticles-engine"></script> <!-- tsParticles plugins --> <script src="https://cdn.jsdelivr.net/npm/tsparticles/tsparticles.bundle.min.js"></script> <!-- jquery wrapper --> <script src="https://cdn.jsdelivr.net/npm/@tsparticles/jquery"></script>
3. Create a container where you want to generate particles.
<div id="tsparticles"></div>
4. Create your own particles by passing the options to the init
method:
$(document).ready(async function () { await loadFull(tsParticles); $("#tsparticles") .particles() .init({ background: { color: { value: "#0d47a1", }, }, fpsLimit: 120, interactivity: { events: { onClick: { enable: true, mode: "push", }, onHover: { enable: true, mode: "repulse", }, resize: true, }, modes: { push: { quantity: 4, }, repulse: { distance: 200, duration: 0.4, }, }, }, particles: { color: { value: "#ffffff", }, links: { color: "#ffffff", distance: 150, enable: true, opacity: 0.5, width: 1, }, collisions: { enable: true, }, move: { direction: "none", enable: true, outModes: { default: "bounce", }, random: false, speed: 6, straight: false, }, number: { density: { enable: true, area: 800, }, value: 80, }, opacity: { value: 0.5, }, shape: { type: "circle", }, size: { value: { min: 1, max: 5 }, }, }, detectRetina: true, }, function (container) { // container is the particles container where you can play/pause or stop/start. // the container is already started, you don't need to start it manually. } ); });
Changelog:
v2.8.0 (2023-01-19)
- Updated dependencies.
This awesome jQuery plugin is developed by matteobruni. For more Advanced Usages, please check the demo page or visit the official website.