Author: | Barrior |
---|---|
Views Total: | 2,600 views |
Official Page: | Go to website |
Last Update: | July 25, 2021 |
License: | MIT |
Preview:

Description:
A dependency-free JavaScript library for creating animated, interactive, configurable particle animations on a Canvas
element that reacts to your cursor.
Animations Included:
Installation:
$ npm install JParticles
How to use it:
1. Import the JParticles.
<!-- All In One --> <script src="/path/to/browser/jparticles.all.js"></script> <!-- OR... --> <script src="/path/to/browser/jparticles.base.js"></script> <script src="/path/to/browser/line.js"></script> <script src="/path/to/browser/particle.js"></script> <script src="/path/to/browser/snow.js"></script> <script src="/path/to/browser/wave.js"></script> <script src="/path/to/browser/wave-loading.js"></script>
// As a Vue component import { Particle } from 'jparticles' export default { mounted() { new Particle('#demo') } }
// As a React component import { Particle } from 'jparticles' class Example extends React.Component { componentDidMount() { new Particle('#demo') } render() { return <div id="demo"></div> } }
2. Create a DIV container to place the Particle Animation.
<div id="demo" style="width: 400px; height: 250px;"></div>
3. Create a particle effect.
new JParticles.particle('#demo', { // opacity: 0 ~ 1 opacity: 1, // 'red' or ['red', 'blue', 'green'] color: [], // auto resize to fit the screen resize: true, // number of particles num: 0.12, // max radius maxR: 2.4, // min radius minR: 0.6, // max speed maxSpeed: 1, // min speed minSpeed: 0.1, // connection line options proximity: 0.2, range: 0.2, // line width lineWidth: 0.2, // spider or cube lineShape: 'spider', // null = current canvas element eventElem: null, // enable parallax effect parallax: false, // parallax layers parallaxLayer: [1, 2, 3], // pallax strength parallaxStrength: 3, });
4. Create a wave animation.
new JParticles.Wave('#demo', { // opacity: 0 ~ 1 opacity: 1, // 'red' or ['red', 'blue', 'green'] color: [], // auto resize to fit the screen resize: true, // number of waves num: 3, // draw lines line: true, // line colors lineColor: [ 'rgba(0, 190, 112, 0.5)', 'rgba(0, 190, 112, 0.7)', 'rgba(0, 190, 112, 0.9)', ], // width lineWidth: [0.5, 0.7, 0.9], // fill background fill: false, // background colors fillColor: [], // offset offsetLeft: [2, 1, 0], offsetTop: 0.75, // height of crest crestHeight: [10, 14, 18], // number of crests crestCount: 2, // animation speed speed: 0.1, })
5. Create a snow falling effect.
new JParticles.Snow('#demo', { // opacity: 0 ~ 1 opacity: 1, // 'red' or ['red', 'blue', 'green'] color: [], // auto resize to fit the screen resize: true, // number of snowflakes num: 6, // color color: '#fff', // max radius maxR: 2.4, // min radius minR: 0.6, // max speed maxSpeed: 1, // min speed minSpeed: 0.1, // duration of animation in ms duration: 200, // randomly change the direction of falling swing: true, swingInterval: 2000, swingProbability: 0.06, // custom shape shape: [ 'triangle', 'circle', 'star', 'star:4:0.5', 'gift.png' ], })
6. Create a line animation.
new JParticles.Line('#demo', { // opacity: 0 ~ 1 opacity: 1, // 'red' or ['red', 'blue', 'green'] color: [], // auto resize to fit the screen resize: true, // number of lines num: 6, // max width maxWidth: 2, // min width minWidth: 1, // max speed maxSpeed: 3, // min speed minSpeed: 1, // max degree maxDegree: 90, // min degree minDegree: 80, // create new lines on click createOnClick: true, // number lines to create on click numberOfCreations: 3, // remove lines when going out of the canvas removeOnOverflow: true, overflowCompensation: 20, // in px // number of lines to reserve reservedLines: 6, })
7. Create a liquid loading animation.
new JParticles.WaveLoading('#demo', { // opacity: 0 ~ 1 opacity: 1, // 'red' or ['red', 'blue', 'green'] color: [], // auto resize to fit the screen resize: true, // number of waves num: 1, // font styles font: 'normal 400 16px Arial', // font color textColor: '#333', // loading text textFormatter: 'loading...%d%', // draw lines line: false, // fill background fill: true, // background colors fillColor: [], // offset offsetLeft: 0, // height of crest crestHeight: 4, // number of crests crestCount: 1, // duration of the animation duration: 5000, // linear or swing easing: 'swing', })
8. API method.
const instance = new JParticles.Particle('#demo'); // start the animation instance.open() // pause the animation instance.pause()
9. Trigger a function when the instance is destroyed.
instance.onDestroy(() => { // do something })
Changelog:
v3.4.0 (07/24/2021)
- Added more settings and methods to the Snow effect.
v3.2.0 (07/14/2021)
- Particle and Snow effects now support custom shapes
v3.1.0 (04/13/2021)
- JS updated
v3.0.0 (03/18/2021)
- Support mask function used for custom logo.
- Full support for TypeScript.
- Added line animation effect.
- Improve some APIs
v3.0.0beta2 (03/18/2021)
- Code refactor
v3.0.0beta (01/28/2021)
- Code refactor
v2.1.0 (07/22/2018)
- Code refactor
v2.0.1 (09/21/2018)
- Bugfix