particles.ts

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

---