jQuery Wrapper For tsParticles Particle Library

jQuery Wrapper For tsParticles Particle Library
File Size: 1 KB
Views Total: 484
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 jquery-particles --save

2. Load the jquery-particles plugin after jQuery & tsParticles libraries.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/cdn/tsparticles.min.js"></script>
<script src="/path/to/src/jquery.particles.js"></script>

3. Create a container where you want to generate particles.

<div id="tsparticles"></div>

4. Initialize the plugin and load a preset via AJAX requests.

  • bubble.json
  • chars.json
  • collisions.json
  • connect.json
  • default.json
  • images.json
  • mask.json
  • nasa.json
  • nyancat.json
  • nyancat2.json
  • shadow.json
  • slow.json
  • snow.json
  • star.json
  • test.json
  • virus.json
$('#tsparticles').fn.particles().ajax('particles.json', function (container) {
  // do something
});

5. Or create your own particles by passing the options to the init method:

$('#tsparticles').fn.particles().init({
  "particles": {
    "color": {
      "value": "#ffffff"
    },
    "number": {
      "value": 80,
      "limit": 200,
      "density": {
        "enable": true,
        "value_area": 800
      }
    },
    "shape": {

      /* "circle"
      "line"
      "edge"
      "triangle"
      "polygon"
      "star"
      "image"
      ["circle", "triangle", "image"]
      */
      "type": "circle", 
      "stroke": {
        "width": 0,
        "color": "#000000"
      },
      "polygon": {
        "nb_sides": 5
      },
      "image": {
        "src": "img/github.svg",
        "width": 100,
        "height": 100
      }
    },
    "opacity": {
      "value": 0.5,
      "random": false,
      "anim": {
        "enable": false,
        "speed": 1,
        "opacity_min": 0.1,
        "sync": false
      }
    },
    "size": {
      "value": 10,
      "random": true,
      "anim": {
        "enable": false,
        "speed": 80,
        "size_min": 0.1,
        "sync": false
      }
    },
    "line_linked": {
      "enable": true,
      "distance": 300,
      "color": "#ffffff",
      "opacity": 0.4,
      "width": 2
    },
    "move": {
      "enable": true,
      "speed": 12,
      /*
        "none"
        "top"
        "top-right"
        "right"
        "bottom-right"
        "bottom"
        "bottom-left"
        "left"
        "top-left"
      */
      "direction": "none",
      "random": false,
      "straight": false,
      /*
        "out"
        "destroy"
        "bounce"
        "bounce-vertical"
        "bounce-horizontal"
      */
      "out_mode": "out",
      "bounce": false,
      "attract": {
        "enable": false,
        "rotateX": 600,
        "rotateY": 1200
      }
    }
  },
  "interactivity": {
    "detect_on": "canvas", // "canvas", "window","parent"
    "events": {
      "onhover": {
        "enable": false,
        /* 
          "grab"
          "bubble"
          "repulse"
          "connect"
          ["grab", "bubble"]
        */
        "mode": "repulse"
      },
      "onclick": {
        "enable": true,
        /*
          "push"
          "remove"
          "bubble"
          "repulse"
          ["push", "repulse"]
        */
        "mode": "push"
      },
      "resize": true
    },
    "modes": {
      "grab": {
        "distance": 800,
        "line_linked": {
          "opacity": 1
        }
      },
      "bubble": {
        "distance": 800,
        "size": 80,
        "duration": 2,
        "opacity": 0.8,
        "speed": 3
      },
      "repulse": {
        "distance": 400,
        "duration": 0.4
      },
      "push": {
        "particles_nb": 4
      },
      "remove": {
        "particles_nb": 2
      }
    }
  },
  "retina_detect": true,
  "fps_limit": 60,
  "polygon": {
    "debug": {
      "enable": true,
      "color": "#000000"
    },
    "type": "inside", // none / inside / outside / inline
    "move": {
      "radius": 10
    },
    "url": "demo/svg/deer.svg"
  }
}, function (container) {
  // do something
});

Changelog:

v1.15.2 (2020-06-01)

  • Updated dependencies.

This awesome jQuery plugin is developed by matteobruni. For more Advanced Usages, please check the demo page or visit the official website.