[JavaScript] sketch.js로 마우스를 따라 다니는 파티클 효과 구현하기

sketch.js로 마우스를 따라 다니는 파티클 효과를 구현할 수 있다.

공식 사이트는 참고하면 좋고, 코드를 바로 사용하려면 아래 codepen에 있는 코드를 그대로 사용하면 된다.

 

sketch.js 데모 사이트

sketch.js

 

파티클 효과 데모 사이트

sketch.js » Basic Example

 

See the Pen sketch.js Demo by lpla (@lpla) on CodePen.

 

 

 

실제 웹사이트에 적용할 때 sketch.js 스크립트를 추가하는 것은 필수다.

아래는 스크립트를 조금씩 수정한 버전이다.

 

See the Pen sketch.js - 작은 입자 by lpla (@lpla) on CodePen.

입자 크기 변경

 

See the Pen sketch.js - 작은 입자 by lpla (@lpla) on CodePen.

색상 변경

 

 

모바일 스와이프 문제

sketch.js는 캔버스로 동작하는데 모바일에서 스와이프가 안되는 문제가 있다.

이 문제를 해결하려면 sketch.js 파일에서 아래 코드를 수정하면 된다.

 

수정 전

function u(e) {
  e.preventDefault(), e = a(e), o(s.touches, e.touches), n(s.touches[0]), s.touchstart && s.touchstart(e), s.mousedown && s.mousedown(e);
}

 

수정 후

function u(e) {
  if(e.cancelable) e = a(e), o(s.touches, e.touches), n(s.touches[0]), s.touchstart && s.touchstart(e), s.mousedown && s.mousedown(e);
}