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 random
        confetti(
            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。如果你遇到任何问题，也欢迎你评论私信找我， 虽然有些问题我可能也不一定会，但是我会查阅各方资料，争取给出最好的建议，希望可以帮助更多想学编程的人，共勉~
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

【RP2040】香瓜树莓派RP2040之自定义的短按、双击、长按按键

【RP2040】香瓜树莓派RP2040之自定义的短按、双击、长按按键

本文最后修改时间&#xff1a;2022年09月15日 11:02 一、本节简介 本节介绍如何编写一个可以自己选择引脚的短按、双击、长按三种方式的按键驱动。 二、实验平台 1、硬件平台 1&#xff09;树莓派pico开发板 ①树莓派pico开发板*2 ②micro usb数据线*2 2&#xff09;电脑…
阅读更多...
【运维】linkis安装dss保姆级教程与踩坑实践

【运维】linkis安装dss保姆级教程与踩坑实践

文章目录 一. 安装准备二. 创建用户三. 准备安装包四. 修改配置1. 修改config.sh2. 修改db.sh 五、安装和使用1. 执行安装脚本2. 启动服务3. 查看验证是否成功 六. 报错处理报错一&#xff1a;The user is not logged in报错二&#xff1a;dss接口报错报错三&#xff1a;执行没…
阅读更多...
IDEA常用工具配置

IDEA常用工具配置

IDEA常用工具&配置 如果发现插件市场用不了&#xff0c;可以设置Http Proxy&#xff0c;在该界面上点击”Check connection“并输入的地址&#xff1a;https://plugins.jetbrains.com/ 。 一、常用插件 1、MybatisX Mybaits Plus插件&#xff0c;支持java与xml互转 2、F…
阅读更多...
TCP/IP协议组

TCP/IP协议组

TCP/IP通信协议是目前最完整、使用最广泛的通信协议。它的魅力在于可使不同硬件结构、不同操作系统的计算机相互通信。TCP/IP协议既可用于广域网&#xff0c;也可用于局域网&#xff0c;它是Internet/Intranet的基石。TCP/IP通信协议事实上是一组协议。 TCP/IP协议可分为5层也可…
阅读更多...
日志系统——日志格式化模块设计

日志系统——日志格式化模块设计

一&#xff0c;模块主要成员 该模块的主要作用是对日志消息进行格式化&#xff0c;将日志消息组织成制定格式的字符串。 该模块主要成员有两个&#xff1a;1.格式化字符串。 2.格式化子项数组 1.1 格式化字符串 格式化字符串的主要功能是保存日志输出的格式字符串。其格式化字…
阅读更多...
机器学习赋能乳腺癌预测：如何使用贝叶斯分级进行精确诊断？

机器学习赋能乳腺癌预测：如何使用贝叶斯分级进行精确诊断？

一、引言 乳腺癌是女性最常见的恶性肿瘤之一&#xff0c;也会发生在男性身上。每年全球有数百万人被诊断出乳腺癌&#xff0c;对患者的生活和健康造成了巨大的影响。早期的乳腺癌检测和准确的诊断对于提高治疗的成功率至关重要。然而&#xff0c;乳腺癌的早期诊断面临着许多挑战…
阅读更多...
大语言模型与语义搜索；钉钉个人版启动内测，提供多项AI服务

大语言模型与语义搜索；钉钉个人版启动内测，提供多项AI服务

&#x1f989; AI新闻 &#x1f680; 钉钉个人版启动内测&#xff0c;提供多项AI服务 摘要&#xff1a;钉钉个人版正式开始内测&#xff0c;面向小团队、个人用户、高校大学生等人群。该版本具有AI为核心的功能&#xff0c;包括文生文AI、文生图AI和角色化对话等。用户可通过…
阅读更多...
整理mongodb文档:find方法查询数据

整理mongodb文档:find方法查询数据

个人博客 整理mongodb文档:find方法查询数据 求关注&#xff0c;求批评&#xff0c;求指出&#xff0c;如果哪儿不清晰&#xff0c;请指出来&#xff0c;谢谢 文章概叙 如题&#xff0c;本文讲的是如何用find查询数据&#xff0c;如何在数组、字段、对象中查询&#xff0c;以…
阅读更多...
Git 常用操作

Git 常用操作

一、Git 常用操作 1、Git 切换分支 git checkout命令可以用于三种不同的实体&#xff1a;文件&#xff0c;commit&#xff0c;以及分支。checkout的意思就是对于一种实体的不同版本之间进行切换的操作。checkout一个分支&#xff0c;会更新当前的工作空间中的文件&#xff0c;…
阅读更多...
Web菜鸟教程 - Springboot接入认证授权模块

Web菜鸟教程 - Springboot接入认证授权模块

网络安全的重要性不言而喻&#xff0c;如今早已不是以前随便弄个http请求就能爬到数据的时代&#xff0c;而作为一个架构师&#xff0c;网络安全必须在产品开发之初就考虑好。因为在产品开发的后期&#xff0c;一方面是客户增多&#xff0c;压力变大&#xff0c;可供利用的时间…
阅读更多...
JupyterHub实战应用

JupyterHub实战应用

一、JupyerHub jupyter notebook 是一个非常有用的工具&#xff0c;我们可以在浏览器中任意编辑调试我们的python代码&#xff0c;并且支持markdown 语法&#xff0c;可以说是科研利器。但是这种情况适合个人使用&#xff0c;也就是jupyter notebook以我们自己的主机作为服务器…
阅读更多...
iOS设计规范是什么？都有哪些具体规范

iOS设计规范是什么？都有哪些具体规范

iOS设计规范是苹果为移动设备操作系统iOS制定的设计指南。iOS设计规范的制定保证了苹果应用在外观和操作上的一致性和可用性&#xff0c;从而提高了苹果界面设计的用户体验和应用程序的成功性。本文将从七个方面全面分析iOS设计规范。 1.iOS设计规范完整版分享 由「即时设计」…
阅读更多...
容器和云原生（二）：Docker容器化技术

容器和云原生（二）：Docker容器化技术

目录 Docker容器的使用 Docker容器关键技术 Namespace Cgroups UnionFS Docker容器的使用 首先直观地了解docker如何安装使用&#xff0c;并快速启动mysql服务的&#xff0c;启动时候绑定主机上的3306端口&#xff0c;查找mysql容器的ip&#xff0c;使用mysql -h contain…
阅读更多...
设计模式——建造者(Builder)模式

设计模式——建造者(Builder)模式

建造者模式&#xff08;Builder Pattern&#xff09;&#xff0c;又叫生成器模式&#xff0c;是一种对象构建模式 它可以将复杂对象的建造过程抽象出来&#xff0c;使这个抽象过程的不同实现方法可以构造出不同表现的对象。建造者模式是一步一步创建一个复杂的对象&#xff0c;…
阅读更多...
Python文件操作教程,Python文件操作笔记

Python文件操作教程,Python文件操作笔记

文件的打开与关闭 想一想&#xff1a; 如果想用word编写一份简历&#xff0c;应该有哪些流程呢&#xff1f; 打开word软件&#xff0c;新建一个word文件写入个人简历信息保存文件关闭word软件 同样&#xff0c;在操作文件的整体过程与使用word编写一份简历的过程是很相似的…
阅读更多...
使用 BERT 进行文本分类 （01/3）

使用 BERT 进行文本分类 （01/3）

摄影&#xff1a;Max Chen on Unsplash 一、说明 这是使用 BERT 语言模型的一系列文本分类演示的第一部分。以文本的分类作为例&#xff0c;演示它们的调用过程。 二、什么是伯特&#xff1f; BERT 代表 来自变压器的双向编码器表示。 首先&#xff0c;转换器是一种深度学习模…
阅读更多...
【Linux命令详解 | gzip命令】 gzip命令用于压缩文件，可以显著减小文件大小

【Linux命令详解 | gzip命令】 gzip命令用于压缩文件，可以显著减小文件大小

文章标题 简介一&#xff0c;参数列表二&#xff0c;使用介绍1. 基本压缩和解压2. 压缩目录3. 查看压缩文件内容4. 测试压缩文件的完整性5. 强制压缩6. 压缩级别7. 与其他命令结合使用8. 压缩多个文件9. 自动删除原文件 总结 简介 在Linux中&#xff0c;gzip命令是一款强大的文…
阅读更多...
C语言笔试训练【第九天】

C语言笔试训练【第九天】

文章目录 &#x1f47f;1、下列程序的输出是&#xff08; &#xff09;&#x1f48e;2、二维数组X按行顺序存储&#xff0c;其中每个元素占1个存储单元。若 X[4][4] 的存储地址为 Oxf8b82140 , X[9][9] 的存储地址为 Oxf8b8221c ,则 X[7][7] 的存储地址为&#xff08; &#xf…
阅读更多...
交换实验一

交换实验一

题目 交换机上接口配置 SW1 interface GigabitEthernet0/0/1 port hybrid tagged vlan 2 port hybrid untagged vlan 3 to 6 interface Ethernet0/0/2 port hybrid pvid vlan 3 port hybrid untagged vlan 2 to 6 interface Ethernet0/0/3 port link-type access port d…
阅读更多...
C++基础语法——继承

C++基础语法——继承

1.继承是什么&#xff1f; 继承是一种面向对象编程的概念&#xff0c;它允许一个类&#xff08;称为子类或派生类&#xff09;从另一个类&#xff08;称为基类或父类&#xff09;继承属性和方法。继承使得子类能够使用基类已有的代码&#xff0c;并且可以在此基础上进行扩展或修…
阅读更多...
最新文章

Copyright @ 2022~2023