1. Python技术站首页
  2. 其他
  3. Vue

关于vue3使用particles粒子特效的问题

• Vue

要在Vue 3中使用Particles粒子特效，可以使用第三方库particles.js。下面是完整的攻略：

1. 安装particles.js

可以使用npm安装particles.js。

npm install particles.js --save

2. 导入和配置particles.js

在vue的配置文件中（main.js或者App.vue），导入particles.js并进行配置。这里以main.js为例。

import Particles from 'particles.js'

// 设置配置项
const ParticlesConfig = {
  particles: {
    number: {
      value: 80,
      density: {
        enable: true,
        value_area: 800
      }
    },
    color: {
      value: '#000000'
    },
    shape: {
      type: 'circle',
      stroke: {
        width: 0,
        color: '#000000'
      },
      polygon: {
        nb_sides: 5
      },
    },
    opacity: {
      value: 0.5,
      random: false
    },
    size: {
      value: 5,
      random: true
    },
    line_linked: {
      enable: true,
      distance: 150,
      color: '#000000',
      opacity: 0.4,
      width: 1
    },
    move: {
      enable: true,
      speed: 6,
      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: 200
      },
      push: {
        particles_nb: 4
      },
      remove: {
        particles_nb: 2
      }
    }
  },
  retina_detect: true
}

Vue.use(Particles, ParticlesConfig)

3. 使用particles.js

之后，可以在需要的页面中加入一个带有id属性的div，并在vue的组件中使用ref找到这个元素。

<div id="particles"></div>

<template>
  <div>
    <div id="particles" ref="particles">
      This is particles.js
    </div>
  </div>
</template>
<script>
export default {
  mounted () {
    this.initParticles()
  },
  methods: {
    initParticles () {
      // 找到包含particles.js特效的div
      let particlesDiv = this.$refs.particles

      // 初始化particles.js特效
      particlesJS(particlesDiv, {
        "particles": {
          "number": {
            "value": 80,
            "density": {
              "enable": true,
              "value_area": 800
            }
          },
          "color": {
            "value": "#ffffff"
          },
          "shape": {
            "type": "circle",
            "stroke": {
              "width": 0,
              "color": "#000000"
            },
            "polygon": {
              "nb_sides": 5
            },
          },
          "opacity": {
            "value": 0.5,
            "random": false
          },
          "size": {
            "value": 5,
            "random": true
          },
          "line_linked": {
            "enable": true,
            "distance": 150,
            "color": "#ffffff",
            "opacity": 0.4,
            "width": 1
          },
          "move": {
            "enable": true,
            "speed": 6,
            "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": 200
            },
            "push": {
              "particles_nb": 4
            },
            "remove": {
              "particles_nb": 2
            }
          }
        },
        "retina_detect": true
      })
    }
  }
}
</script>

4. 示例

下面是两个使用particles.js的实例。

示例1

<template>
  <div>
    <div id="particles" ref="particles"></div>
    <div class="content">
      <h1>Hello, particles!</h1>
      <p>A lovely day isn't it?</p>
    </div>
  </div>
</template>

<script>
export default {
  mounted () {
    this.initParticles()
  },
  methods: {
    initParticles () {
      let particlesDiv = this.$refs.particles

      particlesJS(particlesDiv, {
        "particles": {
          "number": {
            "value": 80,
            "density": {
              "enable": true,
              "value_area": 800
            }
          },
          "color": {
            "value": "#ffffff"
          },
          "shape": {
            "type": "circle",
            "stroke": {
              "width": 0,
              "color": "#000000"
            },
            "polygon": {
              "nb_sides": 5
            },
          },
          "opacity": {
            "value": 0.5,
            "random": false
          },
          "size": {
            "value": 5,
            "random": true
          },
          "line_linked": {
            "enable": true,
            "distance": 150,
            "color": "#ffffff",
            "opacity": 0.4,
            "width": 1
          },
          "move": {
            "enable": true,
            "speed": 6,
            "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": 200
            },
            "push": {
              "particles_nb": 4
            },
            "remove": {
              "particles_nb": 2
            }
          }
        },
        "retina_detect": true
      })
    }
  }
}
</script>

<style>
#particles {
  position: absolute;
  width: 100%;
  height: 100vh;
}
.content {
  text-align: center;
  margin-top: 200px;
  color: #ffffff;
}
</style>

这个例子中，particles.js在整个页面的背景上添加了特效，并在页面内容上方添加了一个白色区块。

示例2

<template>
  <div>
    <div class="avatar">
      <div id="particles" ref="particles"></div>
      <img src="./assets/avatar.png" />
    </div>
    <div class="content">
      <h1>Hello, particles!</h1>
      <p>A lovely day isn't it?</p>
    </div>
  </div>
</template>

<script>
export default {
  mounted () {
    this.initParticles()
  },
  methods: {
    initParticles () {
      let particlesDiv = this.$refs.particles

      particlesJS(particlesDiv, {
        "particles": {
          "number": {
            "value": 80,
            "density": {
              "enable": true,
              "value_area": 800
            }
          },
          "color": {
            "value": "#ffffff"
          },
          "shape": {
            "type": "circle",
            "stroke": {
              "width": 0,
              "color": "#000000"
            },
            "polygon": {
              "nb_sides": 5
            },
          },
          "opacity": {
            "value": 0.5,
            "random": false
          },
          "size": {
            "value": 5,
            "random": true
          },
          "line_linked": {
            "enable": true,
            "distance": 150,
            "color": "#ffffff",
            "opacity": 0.4,
            "width": 1
          },
          "move": {
            "enable": true,
            "speed": 6,
            "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": 200
            },
            "push": {
              "particles_nb": 4
            },
            "remove": {
              "particles_nb": 2
            }
          }
        },
        "retina_detect": true
      })
    }
  }
}
</script>

<style scoped>
.avatar {
  text-align: center;
  margin-top: 50px;
}
.avatar img {
  width: 200px;
  border-radius: 50%;
  border: 5px solid #ffffff;
}
#particles {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
.content {
  text-align: center;
  margin-top: 50px;
  color: #ffffff;
}
</style>

这个例子中，particles.js在头像图片背景上添加了特效，并在页面下方添加了一个白色区域。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：关于vue3使用particles粒子特效的问题 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • Vue3中ref与reactive的详解与扩展

    接下来我将详细讲解“Vue3中ref与reactive的详解与扩展”的完整攻略。 1. 介绍 Vue3是Vue.js的一个重大更新版本，其中ref和reactive是两个新的响应式API。在Vue3中，ref用于创建一个简单的响应式数据，而reactive用于创建一个包含多个响应式数据的响应式对象。本攻略将详细介绍Vue3中ref与reactive的使用方法…

    Vue 2023年5月28日
    00

  • vue请求数据的三种方式

    下面就开始讲解“vue请求数据的三种方式”攻略： 前言 在前后端分离的架构中，前端的数据一般是通过ajax等方式去获取后端服务的数据。而在Vue框架中，请求数据的方式有三种：$ajax、axios、vue-resource。 1.使用$ajax请求数据 // 引入jquery.js <script src="http://ajax.googl…

    Vue 2023年5月28日
    00

  • 基于Vue.js与WordPress Rest API构建单页应用详解

    那么让我为你详细讲解“基于Vue.js与WordPress Rest API构建单页应用详解”的完整攻略。 概述 本文将介绍如何使用Vue.js和WordPress Rest API构建单页应用。使用Vue.js和WordPress Rest API结合，可以轻松快速的创建现代化的单页应用。Vue.js是一个用于构建用户界面的JavaScript框架，而Wo…

    Vue 2023年5月28日
    00

  • Vue开发之watch监听数组、对象、变量操作分析

    当我们在Vue开发时，通常需要监听数据的变化，以便根据数据变化来进行相应的操作。在Vue中，我们可以通过watch属性来实现对数据的监听。本文将详细讲解如何使用Vue的watch属性来监听数组、对象、变量的操作。 监听数组的操作 我们可以通过设置Vue实例的watch属性，来监听数组的操作： data() { return { list: [1, 2, 3]…

    Vue 2023年5月28日
    00

  • mpvue全局引入sass文件的方法步骤

    下面我详细讲解在mpvue中全局引入sass文件的方法。 在mpvue中全局引入sass文件的方法步骤 步骤如下： 安装sass-loader和node-sass模块： npm i sass-loader node-sass -D 在 build/webpack.base.conf.js 中添加sass-loader配置： // build/webpack.…

    Vue 2023年5月28日
    00

  • Electron学习应用程序打包实例详解

    Electron学习应用程序打包实例详解 Electron是一种开源的框架，可以使用HTML，CSS和JS来开发桌面应用程序。在本文中，我们将重点介绍如何打包Electron应用程序。 安装Electron Builder Electron Builder是一种著名的Electron打包工具，它可以将Electron应用程序打包成可执行文件。首先，我们需要使…

    Vue 2023年5月27日
    00

  • vue中的搜索关键字实例讲解

    下面给您讲解一下“vue中的搜索关键字实例讲解”的完整攻略。 标题 首先，我们需要明确本文的主题和目的。因为该文主要是讲解Vue中的搜索关键字实例讲解，所以我们可以将标题定为： # Vue中搜索关键字实例讲解 简介 在标题之后，我们需要对该文的主要内容进行简要介绍，让读者明确本文所要讲解的内容和解决的问题有哪些。比如： 本文将会详细讲解Vue中如何使用搜索关…

    Vue 2023年5月27日
    00

  • Springboot与vue实现文件导入方法具体介绍

    下面是“Springboot与Vue实现文件导入方法”的完整攻略。 1. 前置条件 在介绍如何实现文件导入功能之前，需要确保以下条件已经满足： 已经安装好Springboot和Vue开发环境； 熟悉Springboot和Vue的基本开发知识； 掌握基本的前端与后端的交互方式和Ajax异步请求的使用； 2. 实现思路 文件导入功能的实现思路如下： 前端页面中使…

    Vue 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部