꽃가루 소스코드 입니다. - 많이 가져다 사용하세요

SDK

2025.04.04 15:11

7,067

244

오늘 오전 7시, 회사 근처에서 전기차를 충전하며 차 안에서 폭죽 효과를 기획하고, 바로 개발계에 적용해보았습니다.

실서버에서도 아주 잠깐 스포(!)를 하며 테스트를 진행했어요.

혹시 모를 서버 정지에 대비해 @TheS 님께서 미리 준비해주신 구글 독스와 유튜브 라이브도 백업 플랜으로 함께 마련해두었습니다.

예전에 @kkigomi 님께서 홈페이지에 쉽게 적용할 수 있도록 도와주신 덕분에, 오늘 오전 11시 22분 파면 발표 직후 곧바로 폭죽 효과를 적용할 수 있었습니다.

이번 폭죽 효과는 오픈소스를 기반으로 만들었으며, 다른 커뮤니티나 개인 페이지등 여러 웹사이트에서도 축하나 기쁜 소식을 알릴 때 클릭하면 폭죽이 터지는 방식으로 널리 쓰였으면 좋겠습니다.

예를 들어, 댓글을 작성할 때 핸드폰에 진동이 울린다든지 하는 식의 기여도 언제든지 환영입니다.
다 함께 즐겁고 유쾌한 웹 환경을 만들어가면 좋겠습니다.

꽃가루 소스코드는 아래의 링크에 있습니다.

이미지 제공 @프리텐더 님

https://damoang.net/free/3531291

링크

https://github.com/damoang/fibergo/blob/main/flower.html

768 회 연결

244명

댓글 48 / 1 페이지

GerrarDinho

04.04 15:12

진짜 대단하십니다~~ 그리고 늘 감사해요ㅠㅠ

개똥클리앙

04.04 15:12

클리앙은 자존심때문에 안쓸듯요ㅋㅋㅋㅋㅋ

에어간디

04.04 15:16

고생많으십니다~~~ 감사합니다!

Spin

04.04 15:16

심이

04.04 15:21

어디서 봤다 했더니 canvas-confetti 였군요 ㅎㅎㅎ
저도 이거랑 벗꽃, 눈 효과 많이 썼습니다.
사내 인프라 사이트에 계절마다 올려놓고 가끔 보시는 분들만 보셔서 챗으로 너무 좋다고 해주셨던 ㅋㅋㅋ

앙알앙알

04.04 15:24

아들낳은중전

04.04 15:27

항상 감사합니다 🩵🩵🩵🩵🩵

DUNHILL

04.04 15:29

Java

04.04 15:29

gons

04.04 15:36

감사합니다~~바로 적용했습니다.

BLUEWTR

04.04 15:42

완벽하게이해햌ㅅ습니다 ㅋㅋ

밀가루인

04.04 15:43

완신

04.04 15:44

멋지십니다~~~~

잇찌

04.04 15:49

나와함께

04.04 15:54

🌟 주요 기능 요약
캔버스 설정

#confetti-canvas를 화면 전체에 고정된 상태로 배치 (position: fixed + z-index: 9999)

화면 크기에 맞게 캔버스 사이즈 설정 (canvas.width = window.innerWidth, 등)

초기 폭죽 자동 실행

페이지 로드 후 중앙에서 한 번 터짐

위치: origin: { x: 0.5, y: 0.3 } → 정중앙보다 살짝 위쪽

옵션: angle, spread, startVelocity, decay, gravity, scalar 등 다양한 설정으로 화려함 조절

클릭 시 폭죽

사용자가 클릭한 위치에서 폭죽 효과가 발생함

이건 5초 후에도 계속 유지됨 (계속 클릭 가능)

5초 후 자동 폭죽 종료

confettiInstance.reset() 호출로 자동 실행된 컨페티만 정리

사용자가 클릭하면 계속 터짐

이런 기능이 있군요..