蓝戒博客

  • 首页
  • 研发说
  • 架构论
  • 效能录
  • AI谈
  • 随笔集
智构苍穹
融合 AI、架构与工程实践,沉淀方法论,构建可持续的技术价值。
  1. 首页
  2. 研发说
  3. 正文

粒子背景特效Particleground.js插件使用解析

2018年10月11日 7314点热度 0人点赞 0条评论

Particleground简介:

Particleground是一个JavaScript插件,用于时髦的后台粒子系统。包括鼠标在桌面设备和移动设备上的陀螺仪控制的可选视差效果。在支持HTML5画布的浏览器中工作。

查看demo

初始化:

particleground(document.getElementById('your-element');

注意事项:

v1.0.0以上版本支持js原生调用,不必依赖jquery。

具体使用方法:

1)引入文件


2)html

3)js调用

// 原生js(要求v1.0.0以上版本):
particleground(document.getElementById('particles');

//可以根据下面表格中参数说明设定相应参数
particleground(document.getElementById('particles'), {
    dotColor: '#ff0000',
    lineColor: '#ff0000'
});

// jQuery:
$('#particles').particleground();
 
//可以根据下面表格中参数说明设定相应参数
$('#particles').particleground({
   dotColor: '#ff0000',
   lineColor: '#ff0000'
});

参数:

名称 默认值 描述
minSpeedX 0.1
maxSpeedX 0.7
minSpeedY 0.1
maxSpeedY 0.7
directionX ‘center’ 可用值 ‘center’, ‘left’ 和’right’.
directionY ‘center’ 可用值’center’, ‘up’ 和 ‘down’.
density 10000 确定生成多少料子
dotColor ‘#666666’  点的颜色
lineColor ‘#666666’  线的颜色
particleRadius 7  粒子半径
Dot size  点的大小
lineWidth 1  线的宽度
curvedLines false 线是否弯曲
proximity 100 两个点间多远开始连
parallax true  视差效果
parallaxMultiplier 5 数量越低,视差效果更强
onInit function() {} 初始时调用函数
onDestroy function() {} 销毁时调用函数

项目地址:

https://github.com/jnicol/particleground

参考:

http://www.jq22.com/jquery-info566

Particleground粒子背景插件

标签: javascript js Particleground 粒子特效
最后更新:2025年9月12日

cywcd

我始终相信,技术不仅是解决问题的工具,更是推动思维进化和创造价值的方式。从研发到架构,追求极致效能;在随笔中沉淀思考,于 AI 中对话未来。

打赏 点赞
< 上一篇
下一篇 >

文章评论

razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
取消回复

cywcd

我始终相信,技术不仅是解决问题的工具,更是推动思维进化和创造价值的方式。从研发到架构,追求极致效能;在随笔中沉淀思考,于 AI 中对话未来。

最新 热点 随机
最新 热点 随机
OpenAI 全量推送 GPT-6 与动态 UI:能点能调,输出还完全免费 打破 40 年 PC 规则,微软联手英伟达推出 GB300 与 RTX Spark:Windows 全面进入“常驻智能体时代” Google 开源 EmbeddingGemma 2:图文音视全打通,多模态 RAG 终于不用拼积木了 万亿开源巨兽炸场,Jira 与 Cloudflare 遭接管:软件工程正经历一场“智能体大重构” 别再靠 Prompt 劝大模型做个好人了!英伟达把安全做进芯片 彻底治好 Agent“记吃不记打”!Google 披露 WikiSkill 架构:让 9B 小模型反杀 27B 的长效知识编译术
不讲废话的 AI 估值 2 亿美元!全面拆解“系统一”决策模型 Jev:70ms 极速响应与工业级实战Cursor 订阅用户的意外彩蛋:独立算力的 Grok Bot 体验指南白嫖 10 亿 Token 与云端虚拟机!Meta Muse 国内成功注册保姆级指南:手把手教你跳过排队狂揽 25 万 Star 封神!黑客松冠军打造的 ECC 到底有多强?把 Claude Code 彻底武装成“工业级正规军”开源神器 VoiceStudio 登顶热榜:本地零成本搞定 ElevenLabs 级声音克隆不用一钉一铆!用豆包大模型徒手撸出古建榫卯3D数字馆,长程 Coding 到底有多硬核?
DApp开发前端技术全解析:技术选型、功能实现与开发步骤 从设计到开发:探索ArcoDesign组件库与ArcoPro的最佳实践 从零到发布的 VSCode 插件开发实战 —— 组件代码片段插件案例解析 手机端rem适配方案 别再瞎做RAG了!谷歌刚开源的OKF,直接撕掉了AI Agent的“遮羞布” Dan Koe:不想打工?用这套方法把兴趣变成收入
最近评论
cywcd 发布于 3 周前(09月22日) 《牛来跑酷》游戏链接地址已更新: 1. Gemini 3.7 Flash 版 牛来跑酷: htt...
渔夫 发布于 11 个月前(11月05日) 学到了,感谢博主分享
沙拉小王子 发布于 9 年前(11月30日) 适合vue入门者学习,赞一个
沙拉小王子 发布于 9 年前(11月30日) 适合vue入门者学习,赞一个
cywcd 发布于 10 年前(04月27日) 请参考一下这篇文章http://www.jianshu.com/p/fa4460e75cd8

COPYRIGHT © 2025 蓝戒博客_智构苍穹-专注于大前端领域技术生态. ALL RIGHTS RESERVED.

京ICP备12026697号-2