给自己的项目（vue3）中添加 下雪/樱花飘落的背景

时间：2024-10-01 15:02:43

查看更佳效果前往我的博客， 可切换

snows_l's BLOGhttp://124.223.41.220/

0、效果图

樱花飘落

雪花飘落

1、安装

 yarn add jparticles / npm i jparticles

2、引入

import { Snow } from 'jparticles'; // 引入粒子效果库 引入雪花效果库

3、使用

在项目中的app.vue/layout.vue 添加如下代码

 <!-- 飘 ????蒙版 -->
<div class="snow" v-show="state.isShowSnow" style="width: 100vw; height: 100vh; position: fixed; top: 0; left: 0; z-index: 9; pointer-events: none" id="snow"></div>

解释， 定位到你想要的层级， 不用担忧覆盖调你的其他内容导致，其他内容无法交互， 只需要加css pointer-events: none,就可以了，上面代码行内样式已经添加

在vue的生命周期钩子函数  onMounted 中new 一下就行

onMounted(() => {
  new Snow('#snow', { num: isMobi ? 1 : 2, maxR: 3, minR: 12, maxSpeed: 0.4, minSpeed: 0.1, swing: true, swingProbability: 0.1, spin: true, shape: sakura() });
});

解释：最后一个参数调用了一个sakura方法， 返回的是樱花的base64, 你想要什么飘落啥就直接放什么就行呢， 图下图（好想必须是base64才行）

其实就是它

jparticles官网

JParticles - A lightweight, efficient and easy-to-use Canvas library for building some cool particle effects. 一个轻量、高效、易于使用的 Canvas 粒子运动特效库JParticles is a lightweight JavaScript library for build user interfaces base on the Canvas. That provide some cool particle effects to bring a surprise for the users.https://jparticles.js.org/#/examples/quick-start

相关文章