lindelof / Particles Bg
React particles animation background component
Stars: ✭ 309
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Particles Bg
react-ago-component
A component for React that renders the approximate time ago in words from a specific past date using an HTML5 time element.
Stars: ✭ 25 (-91.91%)
Mutual labels: react-component
React Yandex Maps
Yandex Maps API bindings for React
Stars: ✭ 277 (-10.36%)
Mutual labels: react-component
Awesome Latex Cv
Latex CV template built with Font Awesome.
Stars: ✭ 294 (-4.85%)
Mutual labels: resume-template
React Telephone Input
React component for entering and validating international telephone numbers
Stars: ✭ 254 (-17.8%)
Mutual labels: react-component
Seapig
🌊🐷 Utility for generalized composition of React components
Stars: ✭ 269 (-12.94%)
Mutual labels: react-component
React New Window
🔲 Pop new windows in React, using `window.open`.
Stars: ✭ 281 (-9.06%)
Mutual labels: react-component
resumeX
📄📱💬 A special resume/CV or personal homepage made with React and LESS.
Stars: ✭ 34 (-89%)
Mutual labels: resume-template
Pigeon Maps
ReactJS Maps without external dependencies
Stars: ✭ 3,198 (+934.95%)
Mutual labels: react-component
React Batch
Batch component for performant frequent updates (flush on count or interval)
Stars: ✭ 258 (-16.5%)
Mutual labels: react-component
Timeago React
🕗 Simple and efficient react component to format date with `*** time ago` statement. eg: '3 hours ago'.
Stars: ✭ 264 (-14.56%)
Mutual labels: react-component
React Horizontal Scrolling Menu
Horizontal scrolling menu component for React.
Stars: ✭ 289 (-6.47%)
Mutual labels: react-component
interview-tips
A collection of awesome Interview Tips and Questions
Stars: ✭ 29 (-90.61%)
Mutual labels: resume-template
Echarts For React
⛳️ Apache ECharts components for React wrapper. 一个简单的 Apache echarts 的 React 封装。
Stars: ✭ 3,441 (+1013.59%)
Mutual labels: react-component
React Hotkeys
React component to listen to keydown and keyup keyboard events, defining and dispatching keyboard shortcuts.
Stars: ✭ 279 (-9.71%)
Mutual labels: react-component
React Snakke
🐍 Reading position indicator for React
Stars: ✭ 306 (-0.97%)
Mutual labels: react-component
Formsy React Components
Bootstrap components for a formsy-react form.
Stars: ✭ 290 (-6.15%)
Mutual labels: react-component
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. Thanks to the great author.
vue.js
version of particles-bg-vue
is here https://github.com/lindelof/particles-bg-vue
A 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'
class Example extends Component {
render () {
return (
<>
<div>...</div>
<ParticlesBg type="circle" bg={true} />
</>
)
}
}
Parameter Description
<ParticlesBg color="#ff0000" num={200} type="circle" bg={true} />
* 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
position: "absolute",
zIndex: -1,
top: 0,
left: 0
About Custom
You can use type="custom" to achieve a higher degree of freedom for the particle background.
let config = {
num: [4, 7],
rps: 0.1,
radius: [5, 40],
life: [1.5, 3],
v: [2, 3],
tha: [-40, 40],
// body: "./img/icon.png", // Whether to render pictures
// rotate: [0, 20],
alpha: [0.6, 0],
scale: [1, 0.1],
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
onParticleUpdate: (ctx, particle) => {
ctx.beginPath();
ctx.rect(particle.p.x, particle.p.y, particle.radius * 2, particle.radius * 2);
ctx.fillStyle = particle.color;
ctx.fill();
ctx.closePath();
}
};
return (
<div>
<SignIn />
<ParticlesBg type="custom" config={config} bg={true} />
</div>
)
Similar projects
Maybe you will like these two projects, they will also make your page flourish
License
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].