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
- particleground.js
- 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.