[JS] tsParticles로 아름답고 사실적인 색종이 애니메이션을 만드는 방법

Matteo Bruni ・ 2021년 6월 29일 ・ 6분 읽기

이 구성은 모든 Angular tsParticles 설치(ng-particles 패키지)에서 있는 그대로 사용할 수 있습니다.

app.module.ts

import { NgParticlesModule } from "ng-particles";

@NgModule({
  declarations: [/* ... */],
  imports: [/* ... */, NgParticlesModule],
  providers: [],
  bootstrap: [/* ... */]
})

app.component.html

<!-- this component can be placed anywhere -->
<Particles id="tsparticles" [options]="options"></Particles>

app.component.ts

export class AppComponent {
  options = {
    /* ... */
  }

  /* ... */
}

작업 샘플은 아래에서 찾을 수 있습니다.

마테브루니 / tsparticles

tsParticles - 고도로 사용자 정의 가능한 JavaScript 입자 효과, 색종이 조각 폭발 및 불꽃놀이 애니메이션을 쉽게 만들고 웹 사이트의 애니메이션 배경으로 사용하십시오. React.js, Vue.js(2.x 및 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot 및 웹 구성 요소에 사용할 수 있는 구성 요소를 사용할 준비가 되었습니다.

tsParticles - TypeScript 입자

파티클 생성을 위한 경량 TypeScript 라이브러리입니다. 종속성 없음(*), 브라우저 준비 및 호환 가능
React.js, Vue.js(2.x 및 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js 및 웹 구성 요소

웹사이트에서 사용하시겠습니까?

설명서 및 개발 참조here 📖
이 라이브러리는…

View on GitHub

Reference

이 문제에 관하여([Angular] tsParticles를 사용하여 아름답고 사실적인 색종이 애니메이션을 만드는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/tsparticles/angular-how-to-create-beautiful-and-realistic-confetti-animations-using-tsparticles-4j14

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다

[Angular] tsParticles를 사용하여 아름답고 사실적인 색종이 애니메이션을 만드는 방법