Home  >  Article  >  Web Front-end  >  Detailed explanation of vue particles.js login background to achieve cool particle animation effects!

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

藏色散人
藏色散人forward
2022-12-07 15:50:262653browse

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

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}

Three, introduce

import particles from 'particles.js'import PcParticles from "./particles.json"

four into the page, page rendering

a,

 <div></div>

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%;}

c,

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

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!

Statement:
This article is reproduced at:learnku.com. If there is any infringement, please contact admin@php.cn delete