Particles

Port of Vincent Garreau' particles.js which was originally a port of Vincent Garreau' particles.js, written in Typescript with added features.

Instalation

$ npm install particles.ts

Or just download the minified script and add it in your HTML:

<script src="particles.min.js"></script>

Usage

The particle class takes 2 optional arguments: id is the element string, and config which is an object with the settings.

particles = new Particles('id', {/*configuration object*/}).start();

You can set only the values you want to change in the configuration object. For example the example below will only change the particles color and use the default settings for everything else.

particles = new Particles('id', {
  particles: {
    color: {
      value: '#FF0000'
    }
  }
})

particles.start()

Configuration

The default config object looks something like this

settings = {
  particles: {
    number: {
      value: 100,
      density: {
        enable: true,
        value_area: 800
      }
    },
    color: {
      value: '#ffffff'
    },
    shape: {
      type: 'circle',
      stroke: {
        width: 0,
        color: '#FFFFFF'
      },
      polygon: {
        nb_sides: 5
      },
      character: {
        value: 'P',
        font: 'arial',
        style: 'normal',
        weight: 'normal',
      },
      image: {
        src: '',
        width: 100,
        height: 100
      }
    },
    opacity: {
      value: 1,
      random: false,
      anim: {
        enable: false,
        speed: 2,
        opacity_min: 0,
        sync: false
      }
    },
    size: {
      value: 10,
      random: false,
      anim: {
        enable: false,
        speed: 20,
        size_min: 0,
        sync: false
      }
    },
    line_linked: {
      enable: true,
      distance: 100,
      color: '#FFFFFF',
      opacity: 1,
      width: 1
    },
    move: {
      enable: true,
      speed: 6,
      direction: 'none',
      random: false,
      straight: false,
      out_mode: 'out',
      bounce: false,
      parallax: false,
      attract: {
        enable: false,
        rotateX: 3000,
        rotateY: 3000
      }
    }
  },
  interactivity: {
    detect_on: 'canvas',
    events: {
      onhover: {
        enable: true,
        mode: 'grab'
      },
      onclick: {
        enable: true,
        mode: 'push'
      },
      resize: true
    },
    modes: {
      grab: {
        distance: 100,
        line_linked: {
          opacity: 1
        },
        outer_shape: {
          enable: false,
          type: 'inherit',
          size: 20,
          stroke: {
            width: 'inherit',
            color: 'inherit'
          },
        }
      },
      bubble: {
        distance: 100,
        size: 40,
        duration: 0.4,
        opacity: 8,
        speed: 3
      },
      repulse: {
        distance: 200,
        strength: 100,
        duration: 0.4
      },
      push: {
        particles_nb: 4
      },
      remove: {
        particles_nb: 2
      }
    }
  },
  retina_detect: false
};

key | type | default | notes ----|---------|------|------ particles.number.value | number | 100 particles.number.density.enable | boolean | true particles.number.density.value_area | number | 800 particles.color.value | string: Hex or "random" string[]: Hex | #FFFFFF | Examples: "#b61924" ["#b61924", "#333333", "999999"] "random" particles.shape.type | string string[] | "circle" | Possible values: "circle" "edge" "square" "triangle" "polygon" "star" "character" "char" "image" particles.shape.stroke.width | number | 0 particles.shape.stroke.color | string | "#FF0000" particles.shape.polygon.nb_slides | number | 5 particles.shape.character.value | string string[] | "P" particles.shape.character.font | string | "arial" particles.shape.character.style | string | "normal" | Possible values are the same as in the CSS font-style property particles.shape.character.weight | string | "normal" | Possible values are the same as in the CSS font-weight property particles.shape.image.src |string | "particle.png" particles.shape.image.width | number | 100 particles.shape.image.height | number | 100 particles.opacity.value | number | 1 | 0 to 1 particles.opacity.random | boolean | false particles.opacity.anim.enable | boolean | false particles.opacity.anim.speed | number | 2 particles.opacity.anim.opacity_min | number | 0 | 0 to 1 particles.opacity.anim.sync | boolean | false particles.size.value | number | 10 particles.size.random | boolean | false particles.size.anim.enable | boolean | false particles.size.anim.speed | number | 20 particles.size.anim.size_min | number | 0 particles.size.anim.sync | boolean | false particles.line_linked.enable | boolean | true particles.line_linked.distance | number | 100 particles.line_linked.color | string | #FFFFFF particles.line_linked.opacity | number | 1 | 0 to 1 particles.line_linked.width | number | 1 particles.move.enable | boolean | true particles.move.speed | number | 6 particles.move.direction | string | "none" | Possible values: "none" "top" "top-right" "right" "bottom-right" "bottom" "bottom-left" "left" "top-left" particles.move.random | boolean |false particles.move.straight | boolean | false particles.move.out_mode | string | "out" | Possible values: "out" "bounce" particles.move.parallax | boolean | false particles.move.bounce | boolean | false | Bounce between particles particles.move.attract.enable | boolean |false particles.move.attract.rotateX | number | 3000 particles.move.attract.rotateY | number | 3000 interactivity.detect_on | string | "canvas" | Possible values: "canvas" "window" interactivity.events.onhover.enable | boolean | true interactivity.events.onhover.mode | string string[] | "grab" | Possible values: "grab" "bubble" "repulse" interactivity.events.onclick.enable | boolean | true interactivity.events.onclick.mode | string string[] | "push" | Possible values: "push" "remove" "bubble" "repulse" interactivity.events.resize | boolean | true interactivity.events.modes.grab.distance | number | 100 interactivity.events.modes.grab.line_linked.opacity | number | 0.75 | 0 to 1 interactivity.events.modes.grab.outer_shape.enable | boolean | false interactivity.events.modes.grab.outer_shape.type | string | "inherit" | "inherit" will use particles.line_linked values Possible values: "inherit" "circle" "edge" "square" "triangle" "polygon" "star" "character" "char" interactivity.events.modes.grab.outer_shape.size | number | 20 | Added to the particles' size interactivity.events.modes.grab.outer_shape.stroke.width | string number | "inherit" | "inherit" will use particles.line_linked values interactivity.events.modes.grab.outer_shape.stroke.color | string | "inherit" | "inherit" will use particles.line_linked values interactivity.events.modes.bubble.distance | number | 100 interactivity.events.modes.bubble.size | number | 40 interactivity.events.modes.bubble.duration | number | 0.4 | in seconds interactivity.events.modes.repulse.strength | number | 100 interactivity.events.modes.repulse.distance | number | 200 interactivity.events.modes.repulse.duration | number | 0.4 | in seconds interactivity.events.modes.push.particles_nb | number | 4 interactivity.events.modes.push.particles_nb | number | 2 retina_detect | boolean | false