Design Kits Blog

간단한 HTML과 CSS, 그리고 JavaScript 코드를 사용하여 애니메이션 효과가 적용된 세 개의 원형 섹션을 구성할 수 있습니다.

이 코드에서는 GSAP 라이브러리와 ScrollTrigger를 사용하여 스크롤 시 애니메이션이 시작되는 효과를 제공합니다. 

이번 예제는 세 가지 원형 섹션에 각각 SVG 원과 텍스트가 포함되며, 스크롤 시 SVG 원이 그려지는 애니메이션과 함께 선 애니메이션이 시작됩니다.

[ 애니메이션 효과의 장점 ]

사용자 몰입감 증대

특정 구간에서 애니메이션이 시작되도록 하여 사용자의 집중도를 높입니다.

반응형 애니메이션

SVG와 CSS 애니메이션은 웹페이지의 모든 해상도에 선명하게 대응하여 고해상도 디스플레이에서도 품질 저하 없이 표시됩니다.

성능 최적화

필요할 때만 애니메이션을 시작하도록 설계되어,  페이지 성능을 개선합니다.

See the Pen svg animation by designkits (@designkits) on CodePen.