欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue3實現(xiàn)粒子動態(tài)背景的示例詳解

 更新時間:2023年11月22日 14:46:01   作者:會說法語的豬  
這篇文章主要為大家詳細介紹了如何利用Vue3實現(xiàn)粒子動態(tài)背景,文中的示例代碼講解詳細,具有一定的學習價值,感興趣的小伙伴可以跟隨小編一起了解一下

官網(wǎng): 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,里面定義配置項數(shù)據(jù)并向外導出

① 

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: { // 鼠標懸浮時,集中于一點,鼠標移開時釋放產(chǎn)生漣漪效果
        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
}

效果

到此這篇關(guān)于Vue3實現(xiàn)粒子動態(tài)背景的示例詳解的文章就介紹到這了,更多相關(guān)Vue3粒子動態(tài)背景內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Monaco?Editor開發(fā)SQL代碼提示編輯器實例詳解

    Monaco?Editor開發(fā)SQL代碼提示編輯器實例詳解

    這篇文章主要為大家介紹了Monaco?Editor開發(fā)SQL編輯器實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-08-08
  • 詳解vue-router基本使用

    詳解vue-router基本使用

    本篇文章主要介紹了詳解vue-router基本使用,詳細的介紹了vue-router的概念和用法,有興趣的可以了解一下。
    2017-04-04
  • vue實現(xiàn)前端展示后端實時日志帶顏色示例詳解

    vue實現(xiàn)前端展示后端實時日志帶顏色示例詳解

    這篇文章主要為大家介紹了vue實現(xiàn)前端展示后端實時日志帶顏色示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2022-11-11
  • vue elementUI 表單校驗的實現(xiàn)代碼(多層嵌套)

    vue elementUI 表單校驗的實現(xiàn)代碼(多層嵌套)

    這篇文章主要介紹了vue elementUI 表單校驗的實現(xiàn)代碼(多層嵌套),文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-11-11
  • vue項目中路由懶加載的三種方式(簡潔易懂)

    vue項目中路由懶加載的三種方式(簡潔易懂)

    本文主要介紹了vue項目中路由懶加載的三種方式,主要包括vue異步組件,組件懶加載,webpack的require.ensure(),具有一定的參考價值,感興趣的可以了解一下
    2024-01-01
  • vue?實現(xiàn)手動分割日期

    vue?實現(xiàn)手動分割日期

    這篇文章主要介紹了vue?實現(xiàn)手動分割日期,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue文件上傳Required request part ‘file‘ is not present問題

    vue文件上傳Required request part ‘file‘ is&n

    這篇文章主要介紹了vue文件上傳Required request part ‘file‘ is not present問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • vue+elementUI組件tree如何實現(xiàn)單選加條件禁用

    vue+elementUI組件tree如何實現(xiàn)單選加條件禁用

    這篇文章主要介紹了vue+elementUI組件tree如何實現(xiàn)單選加條件禁用,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • Vue移動端實現(xiàn)圖片上傳及超過1M壓縮上傳

    Vue移動端實現(xiàn)圖片上傳及超過1M壓縮上傳

    這篇文章主要為大家詳細介紹了Vue移動端實現(xiàn)圖片上傳及超過1M壓縮上傳,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-12-12
  • Vue3對比Vue2的優(yōu)點總結(jié)

    Vue3對比Vue2的優(yōu)點總結(jié)

    vue3解決了vue2的一些缺陷與弊端,學習新的技術(shù)是很有必要的,本文總結(jié)了一些vue3的優(yōu)點,希望各位能盡快轉(zhuǎn)入vue3的使用中
    2021-06-06

最新評論