움직이는 배경을 넣고 싶을 때 사용하는 particles.js

기하학적인 무늬나 눈송이, 하늘에 떠있는 별 같은 효과를 배경으로 넣고 싶을 때 사용

사이트 내에서 이것저것 조절도 가능하다.

 

 

vincentgarreau.com/particles.js/

particles.js - A lightweight JavaScript library for creating particles

 

 

 

사용법

github.com/VincentGarreau/particles.js/

VincentGarreau/particles.js

 

 

<div id="particles-js"></div> // 필요한 작업들은 이 안에 작업

<script src="particles.min.js"></script> //particles.min.js 불러오기
<script src="app.js"></script> // 옵션값을 수정할 수 있는 js 파일

<link href="style.css" rel="stylesheet" type="text/css" /> //particles style.css

 

혹은 header에 cnd 선언

//header 부분에 cdn 선언

<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <!-- stats.js lib --> 
<script src="http://threejs.org/examples/js/libs/stats.min.js"></script>

 

 

 

app.js 파일의 경우 div 구조 하단에 작성해야 작동이 되므로

상단으로 위치 수정을 하고자 할 경우 

파일을 열어 $(function(){  }); 선언을 해준다.

 

각종 옵션은 해당 사이트를 통해 테스트 하며 적용해주면 된다.