Scatter Letters

마우스가 지나갈 때 글자가 흩뿌려집니다.

No PeerDependency! Good performance!

YOUTUBE 시연 영상: https://www.youtube.com/watch?v=eVliGZLmwks&feature=youtu.be

이 프로젝트는 Interactive Developer 김종민 님의 유튜브를 보고 영감을 받아 제작되었습니다.

저만의 interactive motion을 만들어 보았습니다.

Usage

new ScatterLetters(strs[,options])

example

window.onload = () => {
  new ScatterLetters("AIC DB GFJ", {
    sparkLevel: 11,
    comebackSpeed: 1,
    mouseThickness: 15,
    color: "#30e080",
    flyingDotColor: "#e81831",
    blankWidth: 17,
    letterSpacing: 4,
    fontSize: 16,
    top: 310,
    left: 160,
  });
};

문자열은 최대 30글자까지 입력할 수 있습니다. (알파벳, 띄어쓰기만 허용, 대문자로 변환됨)

모든 option은 not required 입니다.

| Key | discription | default | | -------------- | ----------------------------------------- | ------- | | sparkLevel | 마우스가 지나갈 때 스파크가 튀듯 퍼지는 강도입니다. | 6 | | comebackSpeed | 퍼져나간 점이 돌아오는 속도입니다. | 4 | | mouseThickness | 마우스가 지나갈 때 영향을 주는 두께입니다. | 12 | | color | 멈춰있는 점들의 색상입니다. | "#000000" | | flyingDotColor | 흩어져있는 점의 초기 색상입니다. 돌아오며 기본 색상(color)으로 조금씩 변합니다. | "#00FF00" | | blankWidth | 띄어쓰기의 간격입니다. | 10 | | letterSpacing | 자간입니다. | 3 | | fontSize | 폰트 크기입니다. | 20 | | top | 위쪽 마진 값입니다. | 0 | | left | 왼쪽 마진 값입니다. | 0 |