jparticles

A concise, efficient, and lightweight Canvas library for building some cool particle effects.

Usage no npm install needed!

<script type="module">
  import jparticles from 'https://cdn.skypack.dev/jparticles';
</script>

README

npm version dependencies license

Install

npm install jparticles --save

Usage

import JParticles from 'jparticles'
new JParticles.Particle('#demo')

On-Demand Usage (Tree-shaking required, recommended)

import { Particle, Snow } from 'jparticles'

new Particle('#demo')
new Snow('#demo-snow')

On-Demand Usage

import Particle from 'jparticles/lib/particle'
import Snow from 'jparticles/lib/snow'

new Particle('#demo')
new Snow('#demo-snow')

Use in Vue project

<template>
  <div id="demo"></div>
</template>

<script>
import { Particle } from 'jparticles'

export default {
  mounted() {
    new Particle('#demo')
  }
}
</script>

Use in React project

import { Particle } from 'jparticles'

class Example extends React.Component {
  componentDidMount() {
    new Particle('#demo')
  }

  render() {
    return <div id="demo"></div>
  }
}

Documentation

See more details via the API documentation.

Introduction

JParticles(abbreviation for JavaScript particles) is a lightweight JavaScript library for build some cool particle effects in WEB page base on Canvas.

Concept

The main Concept of API design are: The Write Less, Do More and Keep It Simple And Stupid. Hope the library is easy-to-use, high performance and easy-to-maintain.

Compatibility

The library should work fine on the following browsers (because of this compatibility table) :

  • IE 9+
  • Safari 6+
  • Opera 15+
  • Firefox 21+
  • Chrome 23+

For not support browsers it will fail quietly.

Communication

If you have any questions or ideas to help JParticles make progress, you are welcome to put forward your views to issues or discussions. Thanks.

Changelog

Detailed changes for each release are documented in the release notes.

License

MIT

Copyright (c) 2016-present, Barrior Wei