UX/UI Article
Modern Scroll Shadows Using Scroll-Driven Animations
스크롤 기반 애니메이션을 사용한 최신 스크롤 그림자
Using scroll shadows, especially for mobile devices, is a subtle bit of UX that Chris has covered before. Geoff covered a newer approach that uses the animation-timeline property. Here’s yet another way.
특히 모바일 기기에서 스크롤 그림자를 사용하는 것은 Chris가 이전에 다룬 미묘한 UX 기법입니다. Geoff는 animation-timeline 속성을 사용하는 새로운 접근 방식을 다루었습니다. 또 다른 방법을 소개합니다.
요약 :)
스크롤 그림자는 UX에서 미묘하지만 효과적인 디자인 기법으로, 사용자가 콘텐츠 끝에 도달했는지 직관적으로 인식할 수 있게 돕습니다. 기존에는 가상 요소에 불투명도 애니메이션을 적용하거나 그림자를 겹치는 방식이 사용되었으나, 최근에는 animation-timeline과 CSS 사용자 정의 속성(@property)을 활용해 보다 정교하고 브라우저 친화적인 구현이 가능해졌습니다. 이 방식은 스크롤에 따라 요소의 양쪽 끝을 자연스럽게 페이드 처리하는 효과를 제공합니다.
이 기법은 그림자뿐 아니라 마스크를 사용한 페이드 처리로 확장 가능하며, JavaScript 없이 CSS만으로 구현할 수 있어 퍼포먼스 측면에서도 유리합니다. 스크롤 스냅 캐러셀이나 가로 스크롤 테이블 등에 효과적으로 적용되며, Safari 등 일부 브라우저에서는 아직 지원되지 않지만, 비지원 시에도 우아한 폴백이 가능합니다.
이 기법은 그림자뿐 아니라 마스크를 사용한 페이드 처리로 확장 가능하며, JavaScript 없이 CSS만으로 구현할 수 있어 퍼포먼스 측면에서도 유리합니다. 스크롤 스냅 캐러셀이나 가로 스크롤 테이블 등에 효과적으로 적용되며, Safari 등 일부 브라우저에서는 아직 지원되지 않지만, 비지원 시에도 우아한 폴백이 가능합니다.
더보기→
출처.
Kevin Hamer . (2025.05.05). CSS-Tricks. Modern Scroll Shadows Using Scroll-Driven Animations. 2025.05.12. https://css-tricks.com/modern-scroll-shadows-using-scroll-driven-animations/