Detailed explanation of vue particles.js login background to achieve cool particle animation effects!-Vue.js-php.cn

Detailed explanation of vue particles.js login background to achieve cool particle animation effects!

藏色散人

Release： 2022-12-08 14:15:30

forward

2622 people have browsed it

VueHow to achieve particle animation? The following article will introduce to you how to achieve particle animation in vue particles.js login background. I hope it will be helpful to you!

The particle animation effect is like a spider web, stretching, stretching, and flipping smoothly, adding a lot of interest to the page and making it eye-catching.

A brief summary of the practice and use of particle animation in vue. [Related recommendations: vuejs video tutorial, web front-end development]

1, npm download

npm install particles.js

Copy after login

2, create new particles.json

{
    "particles": {
        "number": {
            "value": 80,
            "density": {
                "enable": true,
                "value_area": 800
            }
        },
        "color": {
            "value": "#dedede"
        },
        "shape": {
            "type": "polygon",
            "stroke": {
                "width": 0,
                "color": "#000000"
            },
            "polygon": {
                "nb_sides": 5
            },
            "image": {
                "src": "img/github.svg",
                "width": 100,
                "height": 100
            }
        },
        "opacity": {
            "value": 0.5,
            "random": false,
            "anim": {
                "enable": false,
                "speed": 0.5,
                "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": "#dedede",
            "opacity": 0.4,
            "width": 1.8
        },
        "move": {
            "enable": true,
            "speed": 4,
            "direction": "none",
            "random": false,
            "straight": false,
            "out_mode": "out",
            "bounce": false,
            "attract": {
                "enable": false,
                "rotateX": 600,
                "rotateY": 1200
            }
        }
    },
    "interactivity": {
        "detect_on": "canvas",
        "events": {
            "onhover": {
                "enable": true,
                "mode": "repulse"
            },
            "onclick": {
                "enable": true,
                "mode": "push"
            },
            "resize": true
        },
        "modes": {
            "grab": {
                "distance": 400,
                "line_linked": {
                    "opacity": 1
                }
            },
            "bubble": {
                "distance": 400,
                "size": 40,
                "duration": 2,
                "opacity": 8,
                "speed": 3
            },
            "repulse": {
                "distance": 80,
                "duration": 0.4
            },
            "push": {
                "particles_nb": 4
            },
            "remove": {
                "particles_nb": 2
            }
        }
    },
    "retina_detect": false}

Copy after login

Three, introduce

import particles from &#39;particles.js&#39;import PcParticles from "./particles.json"

Copy after login

four into the page, page rendering

a,

 <div class="login" id="particlesId"></div>

Copy after login

b,

#particlesId{
      position: relative;
      width: 100%;
      height: 600px;
      background:linear-gradient(0deg,rgb(7, 33, 99),rgb(3, 17, 51));
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 50% 50%;}

Copy after login

c,

 mounted(){
    particlesJS("particlesId",PcParticles)
  }

Copy after login

five, renderings

Detailed explanation of vue particles.js login background to achieve cool particle animation effects!

(Learning video sharing: web front-end development, Basic Programming Video)

The above is the detailed content of Detailed explanation of vue particles.js login background to achieve cool particle animation effects!. For more information, please follow other related articles on the PHP Chinese website!