링크 :
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>
옵션값을 잘이용하면 더 이쁘게 사용 가능 하니 잘 활용해 보기 바란다.