잡다한 배똥월드

See the Pen Gentle button 'explode' by b-sseung (@b-sseung) on CodePen.

↓↓ 참고 링크 ↓↓

참고 링크에서는 svg를 사용해서 도형도 다 그리는데 나의 경우에는 이미 이미지가 정해져 있는 상태였음.

그래서 코드를 조금 수정하기로 결정.

코드 수정은 의외로 간단했음.

일단 생성할 위치 정하기.

svg는 지우고 그 위의 부모 노드에 생성.

도형은 JS에서 추가했고, 이미지 파일이기 때문에 객체는 img로 생성.

추가하는 것과 내가 svg를 지우면서 정해진 위치가 틀어졌기 때문에 따로 CSS에서 수정.

그 외에 gsap 애니메이션은 그대로 하되 필요 없는 것은 지움.

-끝-

애니메이션 자체가 귀여워서 자주 쓸 것 같음.