web实现酷炫的canvas粒子动画背景

文章目录

  • 前言
  • 一、particle-bg
    • 1. git地址：
    • 2. 安装
    • 3. 使用
    • 4. 完整demo
  • 二、tsParticles
  • 1. 源码地址：
    • 2. 安装
    • 3. 引入
    • 4. 使用
    • 5. 几个例子
      • 5.1 ts粒子五彩纸屑烟花
      • 5.2 多粒子产卵器-用tsParticles制作
      • 5.3 ts粒子鼠标吸引力
      • 5.4 粒子烟花
  • 源码地址
  • 完结

前言

粒子动画，顾名思义，就是页面上存在大量的粒子构建而成的动画。

传统的粒子动画主要由 Canvas、WebGL 实现，我们经常用来用作网站的动画背景。

今天介绍两个个可以轻松创建高度可定制的粒子动画库。

一、particle-bg

1. git地址：

https://github.com/PengJiyuan/particle-bg

不带连线效果：
在这里插入图片描述
带连线的效果：
在这里插入图片描述

2. 安装

NPM

npm i particle-bg

CDN

https://unpkg.com/particle-bg/lib/particle-bg.umd.min.js

3. 使用

ES Module

import particleBg from 'particle-bg';particleBg('body');

Browser

<script src="https://unpkg.com/particle-bg/lib/particle-bg.umd.min.js"></script>
<script>particleBg('body');
</script>

API

particleBg(element, config)element
要插入粒子背景的DOM。config [Object]
粒子背景的一些配置。config.color
default: '#fff'
粒子的颜色。config.count
default: 100
粒子的数量config.radius
default: 2
粒子的半径config.distance
default: width / 10
粒子间距小于多少会连线config.rate
default: width / 10000
粒子运动的速率config.zIndex
default: 1
canvas的z-index.config.resize
default: true
是否监听window.resize，自动缩放粒子背景。config.line
default: true
粒子之间是否连线。config.bounce
default: false
是否触碰边界进行反弹。

4. 完整demo

<div style="width: 100%;height: 200px;background-color: rgb(109, 108, 106);" id="Bg"></div>
<script src="https://unpkg.com/particle-bg/lib/particle-bg.umd.min.js"></script>
<script>particleBg('#Bg', {color: '#fff',count: 100,radius: 2,distance: 70,rate:1,zIndex: 1,resize: true,line: true,bounce: true,});
</script>

效果
在这里插入图片描述

二、tsParticles

TypeScript Particles 是在 particles.js 基础上重写的一个库，目的是更容易地创建更多的背景动画，并提供更多的实用程序和支持功能。

这个库最大的亮点在于它可以用于许多不同的框架，例如 React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery等等JS框架、Web组件。

1. 源码地址：

GitHub地址:https://github.com/matteobruni/tsparticles

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

更多demo地址:https://codepen.io/collection/DPOage

2. 安装

npm

npm install tsparticles-engine

yarn

yarn add tsparticles-engine

pnpm

pnpm install tsparticles-engine

3. 引入

从版本1.12.11开始使用import和require导入tsParticles了。

const tsParticles = require("tsparticles-engine");
// or
import { tsParticles } from "tsparticles-engine";

4. 使用

index.html

<div id="tsparticles"></div><script src="tsparticles.engine.min.js"></script>

app.js

tsParticles.loadJSON("tsparticles", "presets/default.json").then(container => {console.log("callback - tsparticles config loaded");}).catch(error => {console.error(error);});

5. 几个例子

5.1 ts粒子五彩纸屑烟花

<script src="https://cdn.jsdelivr.net/npm/tsparticles-confetti@2.11.0/tsparticles.confetti.bundle.min.js"></script>
<script id="rendered-js">const duration = 60 * 60 * 1000,animationEnd = Date.now() + duration,defaults = { startVelocity: 30, spread: 360, ticks: 20, zIndex: 0 };function randomInRange(min, max) {return Math.random() * (max - min) + min;}const interval = setInterval(function () {const timeLeft = animationEnd - Date.now();if (timeLeft <= 0) {return clearInterval(interval);}const particleCount = 20 * (timeLeft / duration);// since particles fall down, start a bit higher than randomconfetti(Object.assign({}, defaults, {particleCount,origin: { x: randomInRange(0.1, 0.3), y: Math.random() - 0.2 }}));confetti(Object.assign({}, defaults, {particleCount,origin: { x: randomInRange(0.7, 0.9), y: Math.random() - 0.2 }}));}, 250);
</script>

效果
在这里插入图片描述

5.2 多粒子产卵器-用tsParticles制作

<div style="width: 100%;height: 200px;background-color: rgb(109, 108, 106);" id="tsparticles"></div><script src="https://cdn.jsdelivr.net/npm/tsparticles@1.19.0-alpha.3/dist/tsparticles.min.js"></script>
<script id="rendered-js">tsParticles.load("tsparticles", {fpsLimit: 60,particles: {number: {value: 0,density: {enable: true,value_area: 800}},color: {value: "#ffff00"},shape: {type: "circle"},opacity: {value: 1,random: false,animation: {enable: true,speed: 0.5,minimumValue: 0,sync: false}},size: {value: 8,random: { enable: true, minimumValue: 4 },animation: {enable: false,speed: 20,minimumValue: 4,sync: false}},move: {enable: true,gravity: {enable: true,acceleration: -0.5},speed: 5,direction: "top",random: false,straight: false,outModes: {default: "destroy",bottom: "none"},attract: {enable: true,distance: 300,rotate: {x: 600,y: 1200}}}},interactivity: {detectsOn: "canvas",events: {resize: true}},detectRetina: true,background: {color: "#000000"},emitters: [{direction: "top",particles: {color: "#f00"},rate: {quantity: 1,delay: 0.1},size: {width: 100,height: 10},position: {x: 50,y: 100}},{direction: "top",particles: {color: "#0f0"},rate: {quantity: 1,delay: 0.1},size: {width: 100,height: 10},position: {x: 50,y: 100}}]});//# sourceURL=pen.js
</script>

效果
在这里插入图片描述

5.3 ts粒子鼠标吸引力

<div style="width: 100%;height: 200px;background-color: rgb(109, 108, 106);" id="tsparticles1"></div><script src="https://cdn.jsdelivr.net/npm/tsparticles@1.37.4/tsparticles.min.js"></script>
<script id="rendered-js">tsParticles.load("tsparticles1", {fps_limit: 60,interactivity: {detect_on: "canvas",events: {onclick: { enable: true, mode: "push" },onhover: {enable: true,mode: "attract",parallax: { enable: false, force: 60, smooth: 10 }},resize: true},modes: {push: { quantity: 4 },attract: { distance: 200, duration: 0.4, factor: 5 }}},particles: {color: { value: "#ffffff" },line_linked: {color: "#ffffff",distance: 150,enable: true,opacity: 0.4,width: 1},move: {attract: { enable: false, rotateX: 600, rotateY: 1200 },bounce: false,direction: "none",enable: true,out_mode: "out",random: false,speed: 2,straight: false},number: { density: { enable: true, value_area: 800 }, value: 80 },opacity: {anim: { enable: false, opacity_min: 0.1, speed: 1, sync: false },random: false,value: 0.5},shape: {character: {fill: false,font: "Verdana",style: "",value: "*",weight: "400"},image: {height: 100,replace_color: true,src: "images/github.svg",width: 100},polygon: { nb_sides: 5 },stroke: { color: "#000000", width: 0 },type: "circle"},size: {anim: { enable: false, size_min: 0.1, speed: 40, sync: false },random: true,value: 5}},polygon: {draw: { enable: false, lineColor: "#ffffff", lineWidth: 0.5 },move: { radius: 10 },scale: 1,type: "none",url: ""},retina_detect: true});
</script>

效果
在这里插入图片描述

5.4 粒子烟花

<script src="https://cdn.jsdelivr.net/npm/tsparticles-fireworks@2.11.0/tsparticles.fireworks.bundle.min.js"></script>
<script id="rendered-js">fireworks();</script>

效果
在这里插入图片描述

源码地址

https://gitcode.net/my12/particle

完结

赠人玫瑰，手有余香！如果文章内容对你有所帮助，请不要吝啬你的点赞评论和关注，以便我第一时间收到反馈，你的每一次支持都是我不断创作的最大动力。当然如果你发现了文章中存在错误或者有更好的解决方法，也欢迎评论私信告诉我哦！

好了，我是向宇，https://xiangyu.blog.csdn.net

一位在小公司默默奋斗的开发者，出于兴趣爱好，于是最近才开始自习unity。如果你遇到任何问题，也欢迎你评论私信找我， 虽然有些问题我可能也不一定会，但是我会查阅各方资料，争取给出最好的建议，希望可以帮助更多想学编程的人，共勉~
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/43885.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【运筹优化】运输问题建模 + Java调用Cplex求解

【运筹优化】运输问题建模 + Java调用Cplex求解

文章目录 一、问题描述二、思路分析三、建模方案四、Java调用Cplex代码五、输出结果 一、问题描述 运输问题(transportation problem&#xff09;一般是研究把某种商品从若干个产地运至若干个销地而使总运费最小的一类问题。 本博客将根据下面的例题&#xff0c;介绍运输问题…
阅读更多...
STM32F407使用Helix库软解MP3并通过DAC输出，最精简的STM32+SD卡实现MP3播放器

STM32F407使用Helix库软解MP3并通过DAC输出，最精简的STM32+SD卡实现MP3播放器

只用STM32单片机SD卡耳机插座&#xff0c;实现播放MP3播放器&#xff01; 看过很多STM32软解MP3的方案&#xff0c;即不通过类似VS1053之类的解码器芯片&#xff0c;直接用STM32和软件库解码MP3文件&#xff0c;通常使用了labmad或者Helix解码库实现&#xff0c;Helix相对labm…
阅读更多...
WebRTC音视频通话-WebRTC视频自定义RTCVideoCapturer相机

WebRTC音视频通话-WebRTC视频自定义RTCVideoCapturer相机

WebRTC音视频通话-WebRTC视频自定义RTCVideoCapturer相机 在之前已经实现了WebRTC调用ossrs服务&#xff0c;实现直播视频通话功能。但是在使用过程中&#xff0c;RTCCameraVideoCapturer类提供的方法不能修改及调节相机的灯光等设置&#xff0c;那就需要自定义RTCVideoCaptur…
阅读更多...
到江西赣州ibm维修服务器之旅-联想X3850 x6黄灯故障

到江西赣州ibm维修服务器之旅-联想X3850 x6黄灯故障

2023年08月15日&#xff0c;一位江西赣州工厂客户通过朋友介绍与冠峰售前工程师取得联系&#xff0c;双方对产品故障前后原因沟通的大致情况如下&#xff1a; 服务器型号&#xff1a;Lenovo system x3850 x6 为用户公司erp仓库服务器 服务器故障&#xff1a;正常使用过程中业…
阅读更多...
＜数据结构与算法＞二叉树堆的实现

＜数据结构与算法＞二叉树堆的实现

目录 前言 一、树的概念及结构 1 树的概念 2 树的相关概念 二、二叉树的概念及结构 1.二叉树的概念 2. 特殊的二叉树 3. 二叉树的性质 4.二叉树的存储结构 三、二叉树的顺序结构及实现 1.堆的性质 2.堆的插入 3.堆的实现 堆的结构体 HeapInit 初始化 HeapPush 插入 HeapPop 删…
阅读更多...
【C++进阶】继承、多态的详解（多态篇）

【C++进阶】继承、多态的详解（多态篇）

【C进阶】继承、多态的详解&#xff08;多态篇&#xff09; 目录 【C进阶】继承、多态的详解&#xff08;多态篇&#xff09;多态的概念多态的定义及实现多态的构成条件&#xff08;重点&#xff09;虚函数虚函数的重写&#xff08;覆盖、一种接口继承&#xff09;C11 override…
阅读更多...
solr快速上手：聚合分组查询｜嵌套分组指南（十二）

solr快速上手：聚合分组查询｜嵌套分组指南（十二）

0. 引言 solr作为搜索引擎经常用于各类查询场景&#xff0c;我们之前讲解了solr的查询语法&#xff0c;而除了普通的查询语法&#xff0c;有时我们还需要实现聚合查询来统计一些指标&#xff0c;所以今天我们接着来查看solr的聚合查询语法 1. 常用聚合查询语法 以下演示我们…
阅读更多...
面试题-React(一)：React是什么？它的主要特点是什么？

面试题-React(一)：React是什么？它的主要特点是什么？

探索React&#xff1a;前端开发中的重要角色与主要特点 引言&#xff1a; 在现代前端开发领域&#xff0c;React已经成为最受欢迎和广泛使用的JavaScript库之一。它由Facebook开发并于2013年首次发布。随着时间的推移&#xff0c;React在开发社区中获得了强大的支持和认可。本…
阅读更多...
画质提升+带宽优化，小红书音视频团队端云结合超分落地实践

画质提升+带宽优化，小红书音视频团队端云结合超分落地实践

随着视频业务和短视频播放规模不断增长&#xff0c;小红书一直致力于研究&#xff1a;如何在保证提升用户体验质量的同时降低视频带宽成本&#xff1f; 在近日结束的音视频技术大会「LiveVideoStackCon 2023」上海站中&#xff0c;小红书音视频架构视频图像处理算法负责人剑寒向…
阅读更多...
基于注意力神经网络的深度强化学习探索方法：ARiADNE

基于注意力神经网络的深度强化学习探索方法：ARiADNE

ARiADNE:A Reinforcement learning approach using Attention-based Deep Networks for Exploration 文章目录 ARiADNE:A Reinforcement learning approach using Attention-based Deep Networks for Exploration机器人自主探索(ARE)ARE的传统边界法非短视路径深度强化学习的方…
阅读更多...
Python | Package | Python的三种包安装方式（pip/whl/tar.gz）

Python | Package | Python的三种包安装方式（pip/whl/tar.gz）

文章目录 PIP 安装与卸载Source 安装与卸载Whell 安装与卸载 PIP 安装与卸载 pip install xxx pip install xxxversion_numberpip install captcha pip install captcha0.4# XXX/anaconda3/envs/py373/lib/python3.7/site-packages pip uninstall captchaSource 安装与卸载 p…
阅读更多...
C++音乐播放系统

C++音乐播放系统

C音乐播放系统 音乐的好处c发出声音乐谱与赫兹对照把歌打到c上 学习c的同学们都知道&#xff0c;c是一个一本正经的编程语言&#xff0c;因该没有人用它来做游戏、做病毒、做…做…做音乐播放系统吧&#xff01;&#xff01; 音乐的好处 提升情绪&#xff1a;音乐能够影响我们…
阅读更多...
java语言B/S架构云HIS医院信息系统源码【springboot】

java语言B/S架构云HIS医院信息系统源码【springboot】

医院云HIS全称为基于云计算的医疗卫生信息系统( Cloud- Based Healthcare Information System)&#xff0c;是运用云计算、大数据、物联网等新兴信息技术&#xff0c;按照现代医疗卫生管理要求&#xff0c;在一定区域范围内以数字化形式提供医疗卫生行业数据收集、存储、传递、…
阅读更多...
动手学深度学习--基础知识上篇

动手学深度学习--基础知识上篇

&#x1f388;动手学deep learning ☁️本专栏会定期更新关于动手学深度学习的每章知识点的讲解&#xff0c;题目答案 &#x1f47b;如果喜欢&#xff0c;欢迎点赞&#xff0c;收藏 动手学深度学习-预备知识篇 线性代数篇 1-3题讲解 证明一个矩阵 A \mathbf{A} A的转置的转置…
阅读更多...
安卓手机跑 vins slam （2）

安卓手机跑 vins slam （2）

既然选择把vins的代码移植到新工程&#xff0c;那么就需要先确定自己电脑的Android Studio的C开发环节是OK的&#xff0c;可以通过创建C的示例工程&#xff0c;能正常跑通做验证。 选择Native C 需要选择用C哪个版本&#xff0c; 这里通过百度搜索&#xff0c;slam 编译需要C 1…
阅读更多...
电脑提示丢失(或找不到)msvcp120.dll解决办法

电脑提示丢失(或找不到)msvcp120.dll解决办法

msvcp140.dll是Microsoft Visual C Redistributable的一部分&#xff0c;它是Windows操作系统中的一个动态链接库文件。这个文件包含了许多C标准库函数的实现&#xff0c;对于一些依赖C标准库的应用程序来说&#xff0c;msvcp140.dll是非常重要的。msvcp140.dll的主要用途是提供…
阅读更多...
热电联产在综合能源系统中的选址定容研究（matlab代码）

热电联产在综合能源系统中的选址定容研究（matlab代码）

目录 1 主要内容 目标函数 程序模型 2 部分代码 3 程序结果 1 主要内容 该程序参考《热电联产在区域综合能源系统中的定容选址研究》&#xff0c;主要针对电热综合能源系统进行优化&#xff0c;确定热电联产机组的位置和容量&#xff0c;程序以33节点电网和17节点热网为例…
阅读更多...
CI/CD入门（二）

CI/CD入门（二）

CI/CD入门(二) 目录 CI/CD入门(二) 1、代码上线方案 1.1 早期手动部署代码1.2 合理化上线方案1.3 大型企业上线制度和流程1.4 php程序代码上线的具体方案1.5 Java程序代码上线的具体方案1.6 代码上线解决方案注意事项2、理解持续集成、持续交付、持续部署 2.1 持续集成2.2 持续…
阅读更多...
小白到运维工程师自学之路 第七十五集 （Kubernetes 企业级高可用部署）2

小白到运维工程师自学之路 第七十五集 （Kubernetes 企业级高可用部署）2

8、添加master节点 在k8s-master2和k8s-master3节点创建文件夹 mkdir -p /etc/kubernetes/pki/etcd在k8s-master1节点执行 从k8s-master1复制密钥和相关文件到k8s-master2和k8s-master3 scp /etc/kubernetes/admin.conf root192.168.77.15:/etc/kubernetes scp /etc/kubernet…
阅读更多...
UAF释放后重引用原理

UAF释放后重引用原理

原地址&#xff1a;https://blog.csdn.net/qq_31481187/article/details/73612451 原作者代码是基于linux系统的演示代码&#xff0c;因为windows和Linux 内存管理机制上略有不同&#xff0c;该程序在Windows需要稍微做些改动。 Windows上执行free释放malloc函数分配的内存后…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023