눈이 내리는 효과도 내는 파티클 효과 particle.js

 

 

 

 

점점이 흩어지는 효과를 내는 파티클제이에스 라이브러리

 

코딩을 배우면서 라이브러리라는걸 알게 되었습니다.

 

라이브러리를 통해 나의 보잘 것 없는 코딩실력으로도 멋진 효과를 낼 수 있다는 걸 알게 되었습니다.

 

라이브러리 참 멋진 녀석들이에요.

 

 

지금 알아볼 것은 이런 라이브러리 중 파티클 제이에스(particle.js)입니다.

 

우선 소스를 가지로 이동합니다.

 

파티클 제이에스 사이트로 갑니다.

 

사이트에서 우선 소스를 다운로드 받고, 압축을 풀어서 html에서 링크를 연결합니다.

 

https://vincentgarreau.com/particles.js/

 

 

 

그런 다음 Github로 가셔 사용방법을 알아 봅니다.

 

 

https://github.com/VincentGarreau/particles.js/

 

 

 

깃허브에서 알아본 사용방법을 본 후 나에게 필요한 옵션값들을 조정해 주면 됩니다.

 

 

 

짜잔~~~~

 

첫번째로 적용한 것은 눈 내리는 효과입니다.

 

포트폴리오 중에 중국의 하얼빈 겨울여행 안내 사이트에서 눈 내리는 효과를 사용했습니다.

 

 

 

 

 

두번째로 적용한 것은 밑에서 위로 올라오는 칼라 비누방울 효과입니다.

 

포트폴리오 인트로 페이지에 실제로 적용한 효과입니다.

 

산만하지 않고 은은한 느낌을 주고자 파티클 수량을 아주 적게 설정했습니다.

 

화면에 보이는 파랗고, 노랗고, 녹색의 크고 작은 원들이 파티클들입니다.

 

 

 

 

파티클 효과의 좀 더 다양한 효과들은 코드펜에서도 살펴 보세요.

 

코딩으로 할 수 있는 다양한 효과는 코드펜에서 구경도 하고 배우세요.

 

 

https://codepen.io/

 

 

 

파티클을 효과를 주는 particle.js에 대해 알아 보았습니다.

 

 

 

다른 라이브러리와 마찬가지로,

 

다운을 받고,

 

링크를 해주고,

 

옵션값을 조정해 주면 쉽게 멋진 효과를 낼 수 있습니다.

 

 

 

그럼 오늘도 즐거운 코딩하시길 바랍니다.