Vanilla Disintegratev1.6.1
KO

DOM 요소의 삭제와 복원을 애니메이션으로 구현하는 TypeScript 라이브러리입니다. 유명한 타노스 스냅에서 영감을 받은 WebGL2 기반 GPU 가속 파티클 효과를 내장하며, 순수 JavaScript와 모든 프레임워크를 지원합니다.

npm install vanilla-disintegrate @zumer/snapdom
플레이그라운드에서 효과 만들기
인터랙티브 플레이그라운드

나만의 효과를 만드세요

프리셋에서 시작해 삭제와 복원을 각각 조정하고 두 방향을 미리 본 뒤 바로 사용할 TypeScript를 복사하세요.

준비된 효과
애니메이션
Particle laboratory

Shape the motion

DOM elementWebGL2
스냅샷 준비 중…
파티클의 이동 경로는 유지하면서 가속과 페이드를 바꿉니다.
요소의 어느 부분부터 분해가 시작될지 정합니다.
파티클 애니메이션의 기본 재생 시간입니다. 값이 클수록 느려집니다.
첫 파티클과 마지막 파티클의 시작 시간 차이를 정합니다.
선택한 방출 패턴과 완전한 무작위 순서를 혼합합니다.
각 파티클의 수명에서 페이드가 시작되는 지점입니다.
주변 레이아웃이 움직이기 전에 방출될 파티클의 비율입니다.
문서

프로젝트에 연결하세요

설치와 내장 프리셋으로 시작한 뒤 복원, 실행 취소, 백그라운드 준비 또는 사용자 렌더러를 추가하세요.