Particleground 粒子系统动态背景插件

发布于 2019-06-19 19:31:45 字数 3823 浏览 2504 评论 0

Particleground 是一个粒子系统插件,能够根据鼠标的移动,生成背景的动态,Particleground 包括一个可选的视差效应控制鼠标在桌面设备和移动设备上的陀螺仪,它适用于任何浏览器支持 HTML5 画布。

使用方法

1、下载 Particleground 插件,你可以通过 Particleground 的 Github地址 下载得到 Particleground 的源文件,或者通过问说网开源项目 CDN 加速,不用下载Particleground 即可使用。

2、在页面中引入插件文件和 jQuery 文件

<script src='jquery.min.js'></script>
<script src='jquery.particleground.js'></script>

3、编写 HTML 代码用于显示粒子背景的容器,下面是官方示例的 HTML 代码

<div id="particles">
  <div class="intro">
    <h1>Particleground</h1>
    <p>A jQuery plugin for snazzy background particle systems</p>
  </div>
</div>

4、初始化插件

particleground(document.getElementById('#particles');

或者你可以通过 jQuey 选择器,初始化插件

$('#particles').particleground();

可选参数

可以通过设置选项选择对象的构造函数,下面是一个示例的设置粒子系统点和线的颜色:

$('#particles').particleground({
    dotColor: '#ff0000',
    lineColor: '#ff0000'
});

下面是一个完整的列表的选项和参数的默认值:

  • minSpeedX:0.1
  • maxSpeedX:0.7
  • minSpeedY:0.1
  • maxSpeedY:0.7
  • directionX:'center',Can be one of 'center', 'left' or 'right'. 'center' means that the dots will bounce off the edges of the canvas.
    directionY:'center',Can be one of 'center', 'up' or 'down'. 'center' means that the dots will bounce off the edges of the canvas.
  • density:10000,Determines how many particles will be generated: one particle every n pixels.
  • dotColor:'#666666'
  • lineColor:'#666666'
  • particleRadius:7,Dot size
  • lineWidth:1
  • curvedLines:false
  • proximity:100,How close two dots need to be, in pixels, before they join.
  • parallax:true
  • parallaxMultiplier:5,The lower the number, the more extreme the parallax effect wil be.
  • onInit:function() {},A callback executed after Particleground initializes.
  • onDestroy:function() {},A callback executed after Particleground is destroyed.

方法函数

Particleground 提供了一些公共的方法,可以让你动态控制生成的粒子效果,下面是方法函数调用示例

var pg = particleground(document.getElementById('your-element');
pg.pause();

使用 jQuery 选择器调用

$('#your-element').particlegound('pause');

下面是完整的方法函数列表

  • pause():Pauses the particle system.
  • start():Restarts the particle system if you previously paused it.
  • destroy():Removes the plugin from your element.

相关链接

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

深爱成瘾

文章 0 评论 0

甜点

文章 0 评论 0

Ss Yy

文章 0 评论 0

dgmis009

文章 0 评论 0

花想c

文章 0 评论 0

樱花落人离去

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。