How to use Particles plugins in html page
Posted By : Vikas Pundir | 30-Oct-2017
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
});
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Vikas Pundir
Vikas has a good knowledge of HTML, CSS and JavaScript. He is working as a UI Developer and he love dancing and painting.