Vue3实现粒子动态背景的示例详解

 更新时间:2023年11月22日 14:46:01   作者:会说法语的猪  
这篇文章主要为大家详细介绍了如何利用Vue3实现粒子动态背景,文中的示例代码讲解详细,具有一定的学习价值,感兴趣的小伙伴可以跟随小编一起了解一下

官网: https://particles.js.org/

npm: https://www.npmjs.com/package/particles.vue3

安装

pnpm add particles.vue3
pnpm add tsparticles-slim

注册

main.js 

import { createApp } from 'vue'
import type { App } from 'vue'
import globleApp from './App.vue'
import router from './router'
import Particles from "particles.vue3"
 
const app: App = createApp(globleApp)
 
app.use(router)
   .use(Particles)
   .mount('#app')

引入使用

完整代码 

<template>
  <div class="wft-particles-container" :style="particlesContainerStyle">
    <vue-particles 
      id="wft-tsparticles"
      :particlesInit="particlesInit"
      :options="particlesOpt"
    />
  </div>
</template>
<script setup lang="ts">
import particlesOpt from './config/particles1'
import { loadSlim } from "tsparticles-slim"
import { computed } from 'vue'
 
const props = withDefaults(defineProps<{
  width?: string | number,
  height?: string | number,
  backgroundColor?: string,
  backgroundImage?: string
}>(), {
  width: '100%',
  height: '100%',
  backgroundColor: '#002a3a',
  backgroundImage: ''
})
 
const particlesContainerStyle = computed(() => {
  return {
    width: typeof props.width === 'string' ? props.width : props.width + 'px',
    height: typeof props.height === 'string' ? props.height : props.height + 'px',
    backgroundColor: props.backgroundColor,
    backgroundImage: `url(${props.backgroundImage})`
  }
})
 
const particlesInit = async (engine: any) => {
  await loadSlim(engine);
}
</script>
<style scoped>
.wft-particles-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
 
#wft-tsparticles {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
</style>

其中的options配置: 

可以在同级新建config文件夹,新建particles1.ts, particles2.ts,里面定义配置项数据并向外导出

① 

export default {
  // background: {
  //   color: {
  //     value: '#002a3a'
  //   }
  // },
  fpsLimit: 60,
  interactivity: {
    detectsOn: 'canvas',
    events: {
      onClick: { // 开启鼠标点击的效果
        enable: true,
        mode: 'push'
      },
      onHover: { // 开启鼠标悬浮的效果(线条跟着鼠标移动)
        enable: true,
        mode: 'grab'
      },
      resize: true
    },
    modes: { // 配置动画效果
      bubble: {
        distance: 400,
        duration: 2,
        opacity: 0.8,
        size: 40
      },
      push: {
        quantity: 4
      },
      grab: {
        distance: 200,
        duration: 0.4
      },
      attract: { // 鼠标悬浮时,集中于一点,鼠标移开时释放产生涟漪效果
        distance: 200,
        duration: 0.4,
        factor: 5
      }
    }
  },
  particles: {
    color: {
      value: '#6AECFF' // 粒子点的颜色
    },
    links: {
      color: '#6AECFF', // 线条颜色
      distance: 150,
      enable: true,
      opacity: 0.5, // 不透明度
      width: 2   // 线条宽度
    },
    collisions: {
      enable: true
    },
    move: {
      attract: { enable: false, rotateX: 600, rotateY: 1200 },
      bounce: false,
      direction: 'none',
      enable: true,
      out_mode: 'out',
      random: false,
      speed: 1, // 移动速度
      straight: false
    },
    number: {
      density: {
        enable: true,
        value_area: 800
      },
      value: 80
    },
    opacity: {
      value: 0.5
    },
    shape: {
      type: 'circle'
    },
    size: {
      random: true,
      value: 5
    }
  },
  detectRetina: true
}

② 

export default {
  // background: {
  //   color: {
  //     value: '#0d47a1'
  //   }
  // },
  fpsLimit: 120,
  interactivity: {
    events: {
      onClick: {
        enable: true,
        mode: 'push'
      },
      onHover: {
        enable: true,
        mode: 'repulse'
      },
      resize: true
    },
    modes: {
      bubble: {
        distance: 400,
        duration: 2,
        opacity: 0.8,
        size: 40
      },
      push: {
        quantity: 4
      },
      repulse: {
        distance: 200,
        duration: 0.4
      }
    }
  },
  particles: {
    color: {
      value: '#ffffff'
    },
    links: {
      color: '#ffffff',
      distance: 150,
      enable: true,
      opacity: 0.5,
      width: 1
    },
    collisions: {
      enable: true
    },
    move: {
      direction: 'none',
      enable: true,
      outModes: {
        default: 'bounce'
      },
      random: false,
      speed: 6,
      straight: false
    },
    number: {
      density: {
        enable: true,
        area: 800
      },
      value: 80
    },
    opacity: {
      value: 0.5
    },
    shape: {
      type: 'circle'
    },
    size: {
      value: { min: 1, max: 5 },
    }
  },
  detectRetina: true
}

效果

到此这篇关于Vue3实现粒子动态背景的示例详解的文章就介绍到这了,更多相关Vue3粒子动态背景内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue-router中query和params的区别解析

    vue-router中query和params的区别解析

    vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用,这篇文章主要介绍了vue-router中query和params的区别 ,需要的朋友可以参考下
    2022-10-10
  • Vue3对比Vue2的优点总结

    Vue3对比Vue2的优点总结

    vue3解决了vue2的一些缺陷与弊端,学习新的技术是很有必要的,本文总结了一些vue3的优点,希望各位能尽快转入vue3的使用中
    2021-06-06
  • vue隐藏路由的实现方法

    vue隐藏路由的实现方法

    这篇文章主要介绍了vue隐藏路由的实现方法,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • vue 子组件向父组件传值方法

    vue 子组件向父组件传值方法

    下面小编就为大家分享一篇vue 子组件向父组件传值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • vue-cli3.0如何修改端口号

    vue-cli3.0如何修改端口号

    这篇文章主要介绍了vue-cli3.0如何修改端口号,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue踩坑记之npm install报错问题解决总结

    vue踩坑记之npm install报错问题解决总结

    当你跑起一个项目的时候,第一步需要先安装依赖npm install,下面这篇文章主要给大家介绍了关于vue踩坑之npm install报错问题解决的相关资料,需要的朋友可以参考下
    2022-06-06
  • Vue中ElementUI结合transform使用时如何修复el-select弹框定位不准确问题

    Vue中ElementUI结合transform使用时如何修复el-select弹框定位不准确问题

    这篇文章主要介绍了Vue中ElementUI结合transform使用时如何修复el-select弹框定位不准确问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • 如何理解Vue中computed和watch的区别

    如何理解Vue中computed和watch的区别

    这篇文章主要介绍了Vue中computed和watch的区别,对Vue感兴趣的同学,可以参考下
    2021-05-05
  • vue如何从后台下载.zip压缩包文件

    vue如何从后台下载.zip压缩包文件

    这篇文章主要介绍了vue如何从后台下载.zip压缩包文件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • vue/cli和vue版本对应及安装方式

    vue/cli和vue版本对应及安装方式

    这篇文章主要介绍了vue/cli和vue版本对应及安装方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论