How to use Particles plugins in html page

Posted By : Vikas Pundir | 30-Oct-2017

jquery

Particles Plugins

What is particles plugin: Sometimes we want to add some animation effects in our webpage. So we use some plugins that are already available online. We download the plugin from particles.jsand add into our webpage folder. After that, we use two library app.js and particles.js. Many types of particles plugins are used in the webpage. When we use particles plugins, so we can adjust the number of particles. We can increase or decrease the intensity of particles. Particle background is a new fancy jquery plugin for creating an animated and attractive website background. Particle plugin used for interactive parallax effect that are the response to mouse movement. This plugin work in the modern browser which support html5 canvas element .

How to use particles plugin:

1. First of all add jQuery library and the jQuery Particles.js plugin in the webpage .

<script src="//code.jquery.com/jquery-2.2.4.min.js"></script>

<script src="dist/jquery.particles.js"></script>

2. After that we create an HTML5 canvas element where we want to show the animated particles. Canvas element only use in html5, this is the new tag of html5..

<canvas class="canvas"></canvas>

3. After create a canvas in html call the function particles to a default Particle System on the HTML5 canvas element.

$('.canvas').particles();

4. Config the Particle System with the following options. Here we define the size and maximum particles numbres.We can addjust the speed of particels movment onmouse event.

$('.canvas').particles({ maxParticles: 100, size: 3, speed: 0.5, color:'#000000', minDist: 140, connectParticles:false });


$('.canvas').particles({

  maxParticles: 100,

  size: 3,

  speed: 0.5,

  color:'#000000',

  minDist: 140,

  connectParticles:false

});