옵시디언에서 party.js를 구현, 다양한 효과를 생성하는 Party 플러그인

개요

Party는 party.js 라이브러리를 Obsidian용으로 구현한 플러그인으로 다양한 효과를 생성합니다.

Plugin Info

플러그인 명	Party
플러그인 설명	party.js 구현. 색종이, 반짝이 등 다양한 효과 생성
플러그인 분류	디스플레이 효과, 꾸미기
Github 링크	Github 링크
옵시디언 링크	플러그인 링크
별점	⭐

기능

• 색종이와 반짝이 효과 생성

• 체크박스에 효과 추가 (dataview task 및 task 플러그인도 지원)

• 칸반 호환

사용 방법

사용자 정의 요소 / API

요소에 confetti 또는 sparkles 클래스를 추가하거나, window.party를 통해 접근할 수 있는 party 모듈의 모든 기능을 사용할 수 있습니다. 하지만, 성능 문제를 일으킬 수 있으므로 입자를 과도하게 생성하지 않는 것이 좋습니다.

간단한 색종이 버튼

<button class="confetti">클릭하세요!</button>

DataView JS 지원

```dataviewjs
const buttonMaker = (text) => {
  const btn = this.container.createEl('button', {"text": text});
  btn.addEventListener('click', async (evt) => {
    evt.preventDefault();
    party.confetti(evt); // <---- 색종이 생성
    party.sparkles(evt); // <---- 반짝이 생성
  });
  return btn;
}

dv.table(["파일", "버튼"],
    dv.pages('"Dataview"')
    .map(t => [
      t.file.link,
      buttonMaker("파티를 시작합시다!")
    ]
  )
)
```

Custom Shapes

모양으로 HTML 코드를 사용할 수 있습니다. 예를 들어, SVG 이미지를 모양으로 사용할 수 있습니다.

<svg viewBox="0 0 2 2" width="10" height="10"><circle cx="1" cy="1" r="1"/></svg>

설정의 Custom Shapes 섹션에서 Shape HTML 필드에 코드를 넣고 이름을 지정합니다. 생성한 Custom Shape는 Shapes에서 사용할 수 있습니다.

설정

---