particles-bg
React component for particles backgrounds
This project refers to the source code of the Proton official website, I packaged it into a component. You can use it casually in your own projects
Online demo
- demo1 https://stackblitz.com/edit/react-a6pm3w
- demo2 https://stackblitz.com/edit/react-bpv9fc
- custom1 https://stackblitz.com/edit/react-sop6sx
- custom2 https://stackblitz.com/edit/react-v1ou5e
Install
npm install --save particles-bg
Usage
import React Component from 'react' import ParticlesBg from 'particles-bg' { return <div>...</div> <ParticlesBg ="circle" = /> }
Parameter Description
<ParticlesBg ="#ff0000" = ="circle" = />
* type - Is the type of particle animation
Is the type of particle animation, random
is a random selection. You are also free to customize use custom
.
"color""ball""lines""thick""circle""cobweb""polygon""square""tadpole""fountain""random""custom"
* num - The number of particles emitted each time, generally not set
* color - The background color or particle color of the particle scene
Notice: which should be an array under type=color
* bg - Set to html background
Is set the following properties
About Custom
You can use type="custom" to achieve a higher degree of freedom for the particle background.
let config = num: 4 7 rps: 01 radius: 5 40 life: 15 3 v: 2 3 tha: -40 40 // body: "./img/icon.png", // Whether to render pictures // rotate: [0, 20], alpha: 06 0 scale: 1 01 position: "center" // all or center or {x:1,y:1,width:100,height:100} color: "random" "#ff0000" cross: "dead" // cross or bround random: 15 // or null, g: 5 // gravity // f: [2, -1], // force { ctx; ctx; ctxfillStyle = particlecolor; ctx; ctx; } ; return <div> <SignIn /> <ParticlesBg ="custom" = = /> </div>