CSS scroll-driven narrative
CSS로 이어지는 네 장면
스크롤 위치를 장면의 시간축으로 삼아 신호부터 읽기 fallback까지 연결합니다. 모든 흐름은 HTML과 CSS만으로 작동합니다.
- 장면
- 4
- 런타임 JS
- 0
- 읽기 모드
- 2
01 / 04
Signal
신호를 포착하다
첫 장면이 viewport에 들어오면 view timeline이 원의 간격과 신호점의 농도를 조절합니다. 지원하지 않는 환경에서는 완성된 정적 지도가 그대로 보입니다.
- 텍스트와 시각 효과를 독립적으로 유지
- 장면 진입률은 CSS timeline으로만 계산
02 / 04
Drift
궤도를 따라 이동하다
sticky 장면 안에서 항해점이 경로를 따라 이동합니다. 페이지 스크롤은 브라우저가 그대로 소유하며, 별도의 scroll hijacking은 없습니다.
- scroll snap은 가까운 장면 정렬만 보조
- 키보드와 anchor 이동 순서를 그대로 보존
03 / 04
Arrival
하나의 지점에 도착하다
여러 궤도가 한 좌표로 수렴하면서 앞선 장면의 흐름을 정리합니다. 진행 표시줄은 전체 문서에서 현재 위치를 계속 보여 줍니다.
- 전체 진행률과 장면 번호를 함께 제공
- 색상 외에도 선, 크기, 문장으로 상태 전달
04 / 04
Fallback
효과가 없어도 읽히다
상단의 정적 읽기를 켜면 장면 애니메이션과 snap이 멈춥니다. 브라우저가 scroll timeline을 지원하지 않아도 제목, 순서, 설명은 사라지지 않습니다.
- 사용자가 선택하는 정적 읽기 모드
- reduced motion 환경의 자동 모션 축소
- 런타임 JavaScript 없이 동일한 문서 유지