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

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

• Vue
yizhihongxing

要在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日

相关文章

  • vue初尝试–项目结构(推荐)

    下面是针对“Vue初尝试–项目结构(推荐)”的完整攻略： 1. 什么是Vue Vue是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以逐层应用。Vue的核心库只关注视图层，非常容易学习和集成，同时也可以通过插件或结合其他库来构建完整的单页应用。 2. Vue项目结构推荐 下面，我们来看一下Vue项目的结构推荐： ├── buil…

    Vue 2023年5月29日
    00

  • vue.js整合vux中的上拉加载下拉刷新实例教程

    Vue.js整合Vux中的上拉加载下拉刷新实例教程 Vux是一个基于Vue.js的UI组件库，提供了大量易用的组件和工具。其中，上拉加载和下拉刷新是常用的功能，本文将介绍如何使用Vux实现上拉加载和下拉刷新。 准备工作 首先，需要安装Vux和Vue.js。 npm install vux vue –save 然后，在Vue.js中引入Vux： import…

    Vue 2023年5月27日
    00

  • Vuex详细介绍和使用方法

    Vuex是Vue.js框架中的一个状态管理工具，用于在Vue组件之间进行状态共享。它采用了单一数据源的概念，在全局维护了一个store对象，实现了统一状态的管理和维护。 Vuex的基础概念 State 在Vuex中，状态是唯一的数据源，在前端开发中，我们经常需要在不同的组件中使用相同的状态，为了保证状态的一致性和可控性，我们将其放置在store对象中，即状态…

    Vue 2023年5月27日
    00

  • vue3安装配置sass的详细步骤

    请按照以下步骤来安装配置Sass： 安装Vue CLI Vue CLI是一个官方提供的基于webpack的脚手架。在项目中使用它可以帮助我们自动化构建、配置开发环境和打包等等。下面是安装Vue CLI的命令： npm install -g @vue/cli 创建Vue 3工程 执行以下命令以创建一个新的 Vue 工程： vue create my-proje…

    Vue 2023年5月28日
    00

  • VUE重点问题总结

    VUE重点问题总结攻略 1. Vue组件之间通信方式 在Vue组件开发中，组件之间通信是一个重要的问题。Vue提供了多种组件之间通信的方式，包括props、$parent/$children、$emit/$on、$refs等，下面分别进行详细说明。 Props 使用props向子组件传递数据是最常用的方式。父组件通过props向子组件传递数据，子组件通过pr…

    Vue 2023年5月28日
    00

  • Vue实现docx/xlsx/pdf等类型文件预览功能

    实现Vue对docx/xlsx/pdf等类型文件的预览功能，我们需要使用第三方库来处理这些文件格式，并且需要一个合适的前端组件来显示这些文件。下面是实现该功能的完整攻略： 步骤1：选择合适的前端组件 目前比较流行的前端组件有两种： PDF.js：适用于pdf文件，支持跨浏览器解析和渲染pdf文件。 ViewerJS：适用于docx/xlsx文件等，支持多种文…

    Vue 2023年5月28日
    00

  • 解决Vue watch里调用方法的坑

    当我们在 Vue 组件里使用 watch 来监听某一个数据的变化时，有时候我们需要在回调函数里执行一些复杂的操作，例如：调用一个方法去计算某个值，或者调用一个 API 获取一些数据。但是，有时候我们会遇到这样的问题：在 watch 回调函数里调用方法时，方法里的 this 变量不指向组件实例。 这个问题的原因是由于 JavaScript 中的 this 变量…

    Vue 2023年5月27日
    00

  • springboot整合vue实现上传下载文件

    那么让我们来详细讲解关于springboot整合vue实现上传下载文件的完整攻略吧。 步骤1：创建Spring Boot项目 首先，我们需要创建一个Spring Boot项目，以提供后台服务。我们可以使用Spring Initializr来创建一个基于Maven的Spring Boot项目。在创建过程中，需要添加Web、JPA、MySQL等相关依赖。 步骤2…

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