Animated particle-effect background with parallax effect
HTML JavaScript How To

Animated particle-effect background with parallax effect

Mishel Shaji
Mishel Shaji

Using animations on a website is one of the best ways to create a visual impression. In this article, we’re going to create a Particle-effect background with parallax effect using JavaScript.

Requirements

  1. particleground.js
  2. Jquery

Particleground is a JQuery plugin to create an animated Particle-effect background with an interactive parallax effect that responds to mouse movement. Download the plugin from here.

Creating animation effect

1)  Include JQuery and the JavaScript plugin to 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 to apply the animation effect.

<div id="particles">
<!--content here -->
</div>

3) Call the plugin.

<script>
$(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() {}
});
});
</script>

Complete code

<!DOCTYPE html> 
<html> 
<head>
  <title>Particleground</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>
  <script type='text/javascript' src='../jquery.particleground.min.js'></script>
<style type="text/css">
      #particles {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
</head> 
<body>
<div id="particles" style="background: black;">
</div>
<script>
$(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() {}
});
});
</script>
</body>
</html>

Output

This output may not work well on all browsers. Visit this link to view a demo.