【NPM】particles.vue3 + tsparticles 实现粒子效果

这篇具有很好参考价值的文章主要介绍了【NPM】particles.vue3 + tsparticles 实现粒子效果。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在 NPM 官网搜索这两个库并安装:

npm install element-plus --save
npm i tsparticles

使用提供的 vue 案例和方法:

<template>
  <div>
    <vue-particles
      id="tsparticles"
      :particlesInit="particlesInit"
      :particlesLoaded="particlesLoaded"
      :options="{
        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
      }"
    />
  </div>
</template>

<script setup>
import { loadFull } from "tsparticles";
const particlesInit = async engine => {
  await loadFull(engine);
  // await loadSlim(engine);
};
</script>

<style lang="scss" scoped></style>

即可出现粒子效果。

【NPM】particles.vue3 + tsparticles 实现粒子效果,Node.js,npm,前端,node.js文章来源地址https://www.toymoban.com/news/detail-723390.html

到了这里,关于【NPM】particles.vue3 + tsparticles 实现粒子效果的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3.0运行npm run dev 报错Cannot find module node:url

    近期用vue3.0写项目,npm init vue@latest — npm install 都正常,npm run dev的时候报错如下: 因为使用的node版本是14.15.1低于15.0.0导致,安装node版本等于或者大于15.0.0版本,然后npm run dev即可。 不同的环境,对nodejs版本的要求不一样,我们可以使用nvm工具,管理和切换node.js的版本。 (

    2024年02月08日
    浏览(66)
  • Particle Life粒子生命演化的MATLAB模拟

    惯例声明:本人没有相关的工程应用经验,只是纯粹对相关算法感兴趣才写此博客。所以如果有错误,欢迎在评论区指正,不胜感激。本文主要关注于算法的实现,对于实际应用等问题本人没有任何经验,所以也不再涉及。 Particle Life粒子生命演化最早是2017年由数字艺术家

    2024年02月10日
    浏览(35)
  • Vue3实现打字机效果

    typeit 是一款轻量级打字机特效插件。该打印机特效可以设置打字速度,是否显示光标,是否换行和延迟时间等属性,它可以打印单行文本和多行文本,并具有可缩放、响应式等特点。官方文档

    2024年02月02日
    浏览(53)
  • Vue3+vite实现组件上传npm并应用

    场景 :就是A项目的组件需要在B项目中使用 下面举例的是把a项目pagination分页组件上传到npm,在b项目使用 采坑日记 :封装的组件一定要起name要不调用不成功 1.1 首先在公用组件components文件夹下创建index.js文件,  1.2 index.js  1.3 vite.config.js  1.4 package.json  执行npm run build打包

    2024年02月16日
    浏览(42)
  • 详解Unity中的粒子系统Particle System (十一)

    今天讲最后一个模块——External Forces,该模块需要和Force Field组件配合使用,作用是模拟物理的力对粒子的影响。至此,Unity内置粒子系统的最后一块物理砖补齐,理论上来讲我们已经可以通过粒子系统来模拟世间万物了。废话不多说,进入正题。 本系列提要 Unity粒子系统专

    2024年02月13日
    浏览(36)
  • 详解Unity中的粒子系统Particle System (三)

    上一篇我们详细讲解了有关主模块的全部内容,已经对粒子系统的基本运作有了足够的了解,本篇就来讲一下被粒子系统默认启用的Emission、Shape、Renderer模块又在粒子系统中扮演着怎么样的作用吧。 本系列提要 Unity粒子系统专题博客共分成十二篇来讲解: 【本篇为第三篇】

    2024年02月02日
    浏览(43)
  • 详解Unity中的粒子系统Particle System (二)

    上一篇我们简要讲述了粒子系统是什么,如何添加,以及基本模块的介绍,以及对于曲线和颜色编辑器的讲解。从本篇开始,我们将按照模块结构讲解下去,本篇主要讲粒子系统的主模块,该模块主要是控制粒子的初始状态和全局属性的,以下是关于该模块的介绍,请大家指

    2024年01月17日
    浏览(49)
  • 使用Vue3实现360度全景效果

    全景展示是一种很炫酷的效果,能够带给用户身临其境的感觉,特别是在旅游、房产等行业非常实用。本文将介绍如何使用Vue3来实现360度全景效果。 首先,我们需要安装两个库: pannellum 和 vue-pannellum 。它们可以帮助我们实现360度全景展示的功能。 在Vue3中,我们可以使用

    2023年04月24日
    浏览(32)
  • uniapp实现红包动画效果(vue3)

    首先安装CSS动画库animate.css依赖 打开main.ts文件引入 这两张图片放入static文件夹下 用到的图片red1.png 用到的图片red2.png 红包整体主要分三部分 红包头部 中部 底部 使用uni.createAnimation()创建动画实例并进行相关操作具体查看官方文档 除了红包底部 头部和中部需要定位

    2024年02月12日
    浏览(48)
  • vue3 实现简单计数器示例——一个html文件展示vue3的效果

    目的 :作为一个新手开发,我想使用 Vue 3 将代码封装在 HTML 文件中时,进行界面打开展示。 学了一个简单计数器界面展示,代码如下: 在 上述HTML 文件里,包含了文件头标题 title , 接着定义了一个内容 div id=\\\"app\\\" 而后定义了一个内容,包含标题和数字,以及两个按钮的 templa

    2024年01月18日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包