순수 CSS 애니메이션
이 히어로 공개 효과는 전부 CSS 스크롤 기반 애니메이션으로 만들었습니다.
커버는 스크롤 위치에 묶인 clip-path 애니메이션으로 걷힙니다.
핵심 효과에는 JavaScript가 한 줄도 필요 없습니다.
실무에 바로
제품 출시 페이지, 포트폴리오, 스토리텔링 사이트에 잘 맞습니다. 부드러운 공개가 기대감을 만들고 사용자를 콘텐츠 안으로 끌어들입니다. 지원하지 않는 환경에서도 콘텐츠 자체는 계속 읽힙니다.
브라우저 지원
CSS 스크롤 기반 애니메이션은 Chrome 115+와 Edge 115+에서 동작합니다. 그 밖의 브라우저에서는 애니메이션 없이 콘텐츠가 곧바로 보이므로, 누구든 내용에는 접근할 수 있습니다.