Recently, I tried to create a personal blog with React. When I saw a lot of blogs on the Internet using particle effects, I thought, I want to create a blog with React. For react, use “react-particles-js”: “^3.4.1” to use this package.

The effect

My configuration

"particles": {
            "number": {
              "value": 40."density": {
                "enable": true."value_area": 800}},"color": {
              "value": "#ffffff"
            },
            "shape": {
              "type": "circle"."stroke": {
                "width": 0."color": "# 000000"
              },
              "polygon": {
                "nb_sides": 5
              },
              "image": {
                "src": "img/github.svg"."width": 100."height": 100}},"opacity": {
              "value": 0.7."random": false."anim": {
                "enable": false."speed": 1."opacity_min": 0.1."sync": false}},"size": {
              "value": 3."random": true."anim": {
                "enable": false."speed": 40."size_min": 0.1."sync": false}},"line_linked": {
              "enable": true."distance": 150."color": "#ffffff"."opacity": 0.6."width": 1
            },
            "move": {
              "enable": true."speed": 1."direction": "none"."random": false."straight": false."out_mode": "out"."bounce": false."attract": {
                "enable": false."rotateX": 3000."rotateY": 1500}}},"interactivity": {
            "detect_on": "canvas"."events": {
              "onhover": {
                "enable": true."mode": "grab"
              },
              "onclick": {
                "enable": true."mode": "push"
              },
              "resize": true
            },
            "modes": {
              "grab": {
                "distance": 200."line_linked": {
                  "opacity": 1}},"bubble": {
                "distance": 400."size": 40."duration": 2."opacity": 8,},"repulse": {
                "distance": 200."duration": 0.4
              },
              "push": {
                "particles_nb": 4
              },
              "remove": {
                "particles_nb": 2}}},"retina_detect": false
Copy the code

Significance of Configuration

The key value Parameter Options/Description The instance
particles.number.value Number/quantity 40
particles.number.density.enable boolean    true / false
particles.number.density.value_area Number Indicates the area dispersion density 800
particles.color.value HEX (string) RGB (object) HSL (object) Array Selection (HEX) Random (string) Atom color "#b61924"  {r:182, g:25, b:36}  {h:356, s:76, l:41}  ["#b61924", "#333333", "999999"]  "random"
particles.shape.type String array Selection Specifies the shape of an atom "circle"  "edge"  "triangle"  "polygon"  "star"  "image"  ["circle", "triangle", "image"]
particles.shape.stroke.width Width of the number principle 2
particles.shape.stroke.color HEX (string) Atomic color "# 222222"
particles.shape.polygon.nb_slides Number Number of polygon sides of an atom 5
particles.shape.image.src Path link SVG/PNG/GIF/JPG atomic images can use custom images "assets/img/yop.svg"  "http://mywebsite.com/assets/img/yop.png"
particles.shape.image.width Number (for aspect ratio) Image width 100
particles.shape.image.height Number (for aspect ratio) Image height 100
particles.opacity.value Number (0 to 1) opacity 0.75
particles.opacity.random Boolean Random opacity true / false
particles.opacity.anim.enable Boolean gradient animation true / false
particles.opacity.anim.speed Number Gradient animation speed 3
particles.opacity.anim.opacity_min Number (0 to 1) Gradient animation opacity 0.25
particles.opacity.anim.sync boolean true / false
particles.size.value Number atomic size 20
particles.size.random Boolean Atom size is random true / false
particles.size.anim.enable Boolean atomic gradient true / false
particles.size.anim.speed Number Atomic gradient speed 3
particles.size.anim.size_min number 0.25
particles.size.anim.sync boolean true / false
particles.line_linked.enable Boolean line true / false
particles.line_linked.distance Number Distance of the connection line 150
particles.line_linked.color HEX (string) Connection line color #ffffff
particles.line_linked.opacity Number (0 to 1) Connection opacity 0.5
particles.line_linked.width Number Specifies the width of the connection line 1.5
particles.move.enable Boolean atomic movement true / false
particles.move.speed Number atomic moving speed 4
particles.move.direction String atom moving direction "none"  "top"  "top-right"  "right"  "bottom-right"  "bottom"  "bottom-left"  "left"  "top-left"
particles.move.random Boolean Moves in random direction true / false
particles.move.straight Boolean direct move true / false
particles.move.out_mode String (out of canvas) Whether to move out of canvas "out"  "bounce"
particles.move.bounce Boolean (between Particles) whether it beats or moves true / false
particles.move.attract.enable Boolean attracts between atoms true / false
particles.move.attract.rotateX Number attracts X horizontal distance between atoms 3000
particles.move.attract.rotateY Number y vertical distance 1500
interactivity.detect_on String atom interaction detection "canvas", "window"
interactivity.events.onhover.enable Boolean hover true / false
interactivity.events.onhover.mode String Array Selection Hover mode "grab"Grab adjacent"bubble"Foam ball effect"repulse"Repel effect["grab", "bubble"]
interactivity.events.onclick.enable Boolean Click effect true / false
interactivity.events.onclick.mode String Array Selection Click effect mode "push"  "remove"  "bubble"  "repulse"  ["push", "repulse"]
interactivity.events.resize Boolean Interactive event tuning true / false
interactivity.events.modes.grab.distance Number Atomic interaction grab distance 100
interactivity.events.modes.grab.line_linked.opacity Number (0 to 1) Atomic interaction grab distance line opacity 0.75
interactivity.events.modes.bubble.distance Number atoms grab the distance between foam effects 100
interactivity.events.modes.bubble.size Number atoms to grab the size between foam effects 40
interactivity.events.modes.bubble.duration Number atoms grab continuous events between foam effects (second) 0.4
interactivity.events.modes.repulse.distance Number Repel effect range 200
interactivity.events.modes.repulse.duration Number Repel duration event (second) 1.2
interactivity.events.modes.push.particles_nb Number The number of particles pushed out 4
interactivity.events.modes.push.particles_nb number 4
retina_detect boolean true / false