Фоновый компонент реагирующих частиц, который делает ваш сайт сияющим

Частицы-bg - замечательный проект, он может мгновенно сделать ваше резюме и страницу входа в систему красивыми. Требуется всего одна строка кода, и почти каждый может ее использовать.

URL проекта: https://github.com/lindelof/particles-bg

Онлайн-демонстрация

• 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

Установить

npm install --save particles-bg

использование

import React, { Component } from 'react'
import ParticlesBg from 'particles-bg'
class Example extends Component {
  render () {
    return (
      <div>...</div>
      <ParticlesBg type="circle" bg={true} />
    )
  }
}

Параметр Описание

<ParticlesBg color="#ff0000" num={200} type="circle" bg={true} />

* type - Тип анимации частиц

Тип анимации частиц, random - случайный выбор. Вы также можете свободно настраивать использование custom.

"color"
"ball"
"lines"
"thick"
"circle"
"cobweb"
"polygon"
"square"
"tadpole"
"fountain"
"random"
"custom"

* num - количество частиц, испускаемых каждый раз, обычно не устанавливается

* color - цвет фона или цвет частицы сцены

Примечание: это должен быть массив под type = color

* bg - Установить на html-фон

Установлены следующие свойства

position: "absolute",
zIndex: -1,
top: 0,
left: 0

О Custom

Вы можете использовать type = ”custom” для достижения большей степени свободы для фона частиц.

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>
    )

Лицензия

Https://opensource.org/licenses/MIT