IMPORTANT This repository is no longer maintained. If anyone wants to continue work on Particleground I recommend creating your own fork. Thanks to those who contrinuted to this project.
A JavaScript plugin for snazzy background particle systems. Includes an optional parallax effect controlled by the mouse on desktop devices and gyroscope on mobile devices. Works in any browser that supports HTML5 canvas.
particleground(document.getElementById('your-element');
jQuery:
$('#your-element').particleground();
Options can be set by passing an options object to the constructor.
Here is an example of setting the color of the particle system dots and lines:
particleground(document.getElementById('your-element'), {
dotColor: '#ff0000',
lineColor: '#ff0000'
});
jQuery:
$('#your-element').particleground({
dotColor: '#ff0000',
lineColor: '#ff0000'
});
Here is a full list of options, and their default values:
0.1
0.7
0.1
0.7
'center'
Can be one of 'center'
, 'left'
or 'right'
. 'center'
means that the dots will bounce off the edges of the canvas.
'center'
Can be one of 'center'
, 'up'
or 'down'
. 'center'
means that the dots will bounce off the edges of the canvas.
10000
Determines how many particles will be generated: one particle every n pixels.
'#666666'
'#666666'
7
Dot size
1
false
100
How close two dots need to be, in pixels, before they join.
true
5
The lower the number, the more extreme the parallax effect wil be.
function() {}
A callback executed after Particleground initializes.
function() {}
A callback executed after Particleground is destroyed.
Particleground exposes public methods which can be used to interact with your Particleground instance e.g.
var pg = particleground(document.getElementById('your-element');
pg.pause();
jQuery:
$('#your-element').particlegound('pause');
Pauses the particle system.
Restarts the particle system if you previously paused it.
Removes the plugin from your element.
Particleground was inspired by http://requestlab.fr/ and http://disruptivebydesign.com/
Horia Dragomir: Removed jQuery dependency and improved rendering performance
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。