Show HN: 멋진 네비게이션 표시 효과를 보고, 간단한 HTML+CSS 버전을 만들었습니다

Source: Hacker News

이 예시는 (와 )에서 영감을 받아 (그리고 도용한) 간단한 코드 탐구이며, 원본은 X에 여기 에서 확인할 수 있습니다.

이 예제에서는 HTML + CSS만 사용해(자바스크립트 없이) 버튼을 클릭하면 메뉴가 나타나는 방식을 구현했습니다.

Clip‑paths

1. 원형 공개 – 메뉴는 좌상단에서 우하단으로 확장되는 원형에 의해 드러납니다. 클립‑패스는 다음과 같이 계산됩니다:

   clip-path: circle(calc(1.42 * 100vmax) at 0 0);

   • 100vmax는 뷰포트 너비와 높이 중 더 큰 값을 사용합니다.
   • 1.42(≈ √2)를 곱하면 원의 지름이 뷰포트 대각선을 완전히 커버합니다.

2. 레이 폴리곤 – 폴리곤 클립‑패스를 이용해 “레이” 효과를 시뮬레이션합니다. 현재 폴리곤은 하드코딩되어 있지만, 자바스크립트를 사용해 네비게이션 크기에 맞게 동적으로 생성하고 반응형을 유지하도록 할 수 있습니다.

방문해 주셔서 감사합니다.