캔버스에 그리고 캔버스를 다른 모든 요소 앞에 두되, 캔버스에서 포인터 이벤트를 비활성화하여 페이지와 상호작용할 수 있게 하는 것이 성능 좋은 애니메이션의 트릭임
2015년 고등학교 시절 웹 개발을 하면서 즐거운 시간을 보냈던 기억이 남. 홈커밍 파티에 여자아이를 초대하기 위해 작은 웹사이트에 색종이 뿌리는 애니메이션을 만들었음 (지금 생각하면 너드스러워 보임). 어린 시절 웹사이트 만드는 것이 초능력처럼 느껴졌던 때가 있었음
순수하게 재미를 위한 작은 프로젝트를 사랑함. 그것이 프로그래밍을 시작한 이유이고 여전히 원동력이 되고 있음
데모 페이지에서 입자 수를 400개 정도로 변경하면 색종이가 균일한 "평평한 원뿔" 모양으로 보이는 실망스러운 광경을 목격할 수 있음. 이는 너무 완벽해 보여서 환상을 깨뜨림
통계 시각화, 영화 소품, 웹사이트 색종이 등 세상에서 이런 종류의 디테일에 대한 관심이 드문데, 어디서든 발견하면 소중히 여김
실제 분포는 가우시안에 근사할 것으로 추측되며, 해결책으로는 무작위 분포를 직접 변경하는 것이 좋을 듯함
쿨하고 유용한 라이브러리일 뿐만 아니라, John Ousterhout가 '소프트웨어 설계 철학'에서 말하는 "딥 모듈"의 좋은 예시이기도 함
가장 기본 버전의 라이브러리(색종이 소환)는 사용하기 매우 쉽지만, 제시된 옵션(눈, 특정 색상, 다양한 색종이 효과 등)을 탐색하면서 많은 것을 얻을 수 있음
영업사원들의 관리자 대시보드에 판매 시 색종이 효과를 추가했는데, 놀랍게도 즐겁고 동기부여가 됨
인상적이고 멋진 반면, 내가 사용하는 웹사이트에서 실행되는 것은 보고 싶지 않음. 특히 뉴스레터 팝업이나 장바구니에 상품을 추가할 때 색종이가 나오는 것은 원치 않음
리셋 함수의 이름을 confetti.resetti()로 지었으면 함
몇 년 전 제품의 일부로 유사한 애니메이션을 만들었음. 새로운 사용자가 가입하고 처음으로 제품을 사용하여 특정 결과물을 만들면 색종이 애니메이션이 표시되는 흐름이었음. 제품 관리자들은 이를 즐겁고 신선한 것으로 여겨 임원들에게 자랑했으나, 이후 UX 리뷰와 접근성 테스트를 거친 후 결국 제품에서 제거됨. 데모에서 보여주기에는 재미있었으나 사용자에게는 성가실 수 있음
Hacker News 의견