2017-03-23
링크 : https://github.com/jnicol/particleground/archive/master.zip

위 링크에서 다운 받은 파일로 아래와 같이 사용시에 현재 배경으로 보이는 효과를 적용 할 수 있다.
<style>
#particles {
	width: 100%;
	height: 100%;
	overflow: hidden;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	position: fixed;
	z-index: -2;
	opacity: 0.4;
}
</style>
<script type="text/javascript" src="/post_inc/jquerys/jquery.particleground.min.js"></script>
<script>
$(document).ready(function() {
  $('#particles').particleground({
		dotColor: '#0C4982',
		lineColor: '#2CA8E4',
  });
});

/*document.addEventListener('DOMContentLoaded', function () {
	particleground(document.getElementById('particles'), {
		minSpeedX: 0.1,
		maxSpeedX: 1.1,
		minSpeedY: 0.1,
		maxSpeedY: 1.1,
		directionX: 'center', // 'center', 'left' or 'right'. 'center' = dots bounce off edges
		directionY: 'center', // 'center', 'up' or 'down'. 'center' = dots bounce off edges
		density: 12000, // How many particles will be generated: one particle every n pixels
		dotColor: '#0C4982',
		lineColor: '#2CA8E4',
		particleRadius: 5, // Dot size
		lineWidth: 1,
		curvedLines: true,
		proximity: 100, // How close two dots need to be before they join
		parallax: false
	});
}, false);*/
</script>

<div id="particles"></div>
옵션값을 잘이용하면 더 이쁘게 사용 가능 하니 잘 활용해 보기 바란다.