Animated particle-effect background with parallax effect

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 a parallax effect using JavaScript.

Animated particle-effect background with parallax effect

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.

Share Tweet Send
Loading...
You've successfully subscribed to Geekinsta
Great! Next, complete checkout for full access to Geekinsta
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.