jQuery Plugin For Particle System Background with Parallax Effect - Particleground

Particleground is a fancy jQuery plugin to create an animated 'Particle System' background with an interactive parallax effect that responds to mouse movement. Works on modern browsers which support Html5 canvas element.

How to use it:

1. Include jQuery Javascript library and the jQuery Particleground plugin's script in the document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="path/to/jquery.particleground.min.js"></script>

2. Create a container where you want to apply an animated 'Particle System' background.

<div id="particles">
...
</div>

3. Call the plugin on the container element and customize the Particle System.

$(document).ready(function() {
$('#particles').particleground({
  minSpeedX: 0.1,
  maxSpeedX: 0.7,
  minSpeedY: 0.1,
  maxSpeedY: 0.7,
  directionX: 'center', // 'center', 'left' or 'right'. 'center' = dots bounce off edges
  directionY: 'center', // 'center', 'up' or 'down'. 'center' = dots bounce off edges
  density: 10000, // 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 before they join
  parallax: true,
  parallaxMultiplier: 5, // The lower the number, the more extreme the parallax effect
  onInit: function() {},
  onDestroy: function() {}
});
});

Change log:

2015-02-28

• Canvas element has display block, to fix min-height implementations

---

This awesome jQuery plugin is developed by jnicol. For more Advanced Usages, please check the demo page or visit the official website.