@tsparticles/jquery

Official tsParticles jQuery 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, React, Vue.js (2.x and 3.x


Keywords
front-end, frontend, jquery-plugin, ecosystem:jquery, tsparticles, particles.js, particlesjs, particles, particle, canvas, jsparticles, xparticles, particles-js, particles-bg, particles-bg-vue, particles-ts, particles.ts, react-particles-js, react-particles.js, react-particles, react, reactjs, vue-particles, ngx-particles, angular-particles, particleground, vue, vuejs, preact, preactjs, jquery, angularjs, angular, typescript, javascript, animation, web, html5, web-design, webdesign, css, html, css3, animated, background, confetti, fireworks, fireworks-js, confetti-js, confettijs, fireworksjs, canvas-confetti, hacktoberfest
License
MIT
Install
npm install @tsparticles/jquery@3.0.0

Documentation

banner

@tsparticles/jquery

npm npm GitHub Sponsors

Official tsParticles jQuery plugin

Slack Discord Telegram

tsParticles Product Hunt

Installation

$ npm install @tsparticles/jquery

or

$ yarn add @tsparticles/jquery

or from jsDelivr

jsDelivr

<!-- first include any tsParticles plugin needed -->
<script src="https://cdn.jsdelivr.net/npm/tsparticles/tsparticles.bundle.min.js"></script>

<!-- then include jquery wrapper -->
<script src="https://cdn.jsdelivr.net/npm/@tsparticles/jquery"></script>

How to use

HTML

<div id="tsparticles"></div>
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
// starting from v2 you can add only the features you need reducing the bundle size
$(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",
                        },
                    },
                    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,
                    },
                    move: {
                        direction: "none",
                        enable: true,
                        outModes: {
                            default: "bounce",
                        },
                        random: false,
                        speed: 6,
                        straight: false,
                    },
                    number: {
                        density: {
                            enable: true,
                        },
                        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.
            },
        );

    // or

    $("#tsparticles")
        .particles()
        .ajax("particles.json", 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.
        });
});

Demos

The demo website is here

https://particles.js.org

There's also a CodePen collection actively maintained and updated here

https://codepen.io/collection/DPOage