스크롤 속도가 다른 두 컬럼, JavaScript 없이 CSS만으로 구현하다

Multi-Column Different-Speed Scrolling

사진 갤러리에서 스크롤은 단순한 탐색 수단일 뿐이라는 발상에서 출발해, 두 컬럼이 서로 다른 속도로 움직이는 효과를 CSS Scroll-Driven Animations로 구현했다. `scroll()` 타임라인과 `translateY` 변형을 조합해 오른쪽 컬럼을 더 빠르게 흐르게 하고, `view()` 애니메이션으로 각 사진에 줌 효과까지 더했다. JavaScript는 전혀 사용하지 않았으며, 스크롤 방향을 역전시키는 실험도 소개한다.

스크롤은 단지 새로운 것들을 보기 위한 메커니즘일 뿐이다. '얼마나 남았는지'를 알려주는 스크롤바는 여전히 있어야 하지만, 그 외에는 상당히 자유로워도 되지 않을까?

이 날의 다른 글

2026-11-08