jQuery Plugin For Particle System Background with Parallax Effect - Particleground
File Size: | 45.3 KB |
---|---|
Views Total: | 36030 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.