React使用Particles.js粒子動畫

原創

2020-02-22 07:50

1、安裝
1、npm安裝

npm i react-particle --save

2、yarn安裝

yarn add react-particle

3、使用

import React from 'react'
import Particles from 'react-particles-js';

const Home = () => {
  return (
    <div>
    <Head>
      <title>Home</title>
      <link rel="icon" href="/favicon.ico" />
    </Head>

    <Particles 
              params={{
            		particles: {
            			line_linked: {
            				shadow: {
            					enable: true,
            					color: "#fff",
                      blur: 15,
                      opacity:0.5
            				}
                  },
                  number: {
                    value: 50,
                    density: {
                      enable: true,
                      value_area: 1000
                    }
                  },
                  color: {
                    value: "#ff4040"
                  },
                  "shape": {
                    "type": "circle",
                    "stroke": {
                      "width": 0,
                      "color": "#000000"
                    },
                    "polygon": {
                      "nb_sides": 5
                    }
                  },
                  "opacity": {
                    "value": 1,
                    "random": true,
                    "anim": {
                      "enable": true,
                      "speed": 1,
                      "opacity_min": 1,
                      "sync": false
                    }
                  },
                  "size": {
                    "value": 10,
                    "random": true,
                    "anim": {
                      "enable": false,
                      "speed": 180,
                      "size_min": 0.1,
                      "sync": false
                    }
                  },
                  "move": {
                    "enable": true,
                    "speed": 6,
                    "direction": "none",
                    "random": true,
                    "straight": false,
                    "out_mode": "out",
                    "bounce": false,
                    "attract": {
                      "enable": false,
                      "rotateX": 600,
                      "rotateY": 1200
                    }
                  },
                  
                
          
                },
                interactivity: {
                  "detect_on": "canvas",
                  "events": {
                    "onhover": {
                      "enable": true,
                      "mode": "repulse"
                    }
                  },
                  "modes": {
                    "grab": {
                      "distance": 100,
                      "line_linked": {
                        "opacity": 1
                      }
                    },
                    "bubble": {
                      "distance": 100,
                      "size": 80,
                      "duration": 2,
                      "opacity": 0.8,
                      "speed": 3
                    },
                    "repulse": {
                      "distance": 150,
                      "duration": 0.4
                    },
                    "push": {
                      "particles_nb": 4
                    },
                    "remove": {
                      "particles_nb": 2
                    }
                  }
                },
                retina_detect:true
            	}}
              style={{
                width: '100%',
                backgroundColor: "#000" 
              }}
              
            />

  </div>
  )
}

export default Home