스크롤·드래그·입력 연동
각 항목을 클릭하면 시각 예시·비교·원문을 볼 수 있습니다.
패럴랙스 Parallax
서로 다른 요소가 다른 속도로 이동해 깊이를 느끼게 하는 표현.
배경·전경의 거리감.
스크롤 트리거와 스크롤 연동은 다르다. 사용자 입력을 과도하게 가로채거나 필수 탐색을 모션에 종속시키지 않는다.
스크롤 트리거 애니메이션 Scroll-triggered Animation
특정 스크롤 위치에 도달하면 재생을 시작하는 방식.
화면에 들어올 때 등장.
스크롤 트리거와 스크롤 연동은 다르다. 사용자 입력을 과도하게 가로채거나 필수 탐색을 모션에 종속시키지 않는다.
스크롤 구동 애니메이션 Scroll-driven Animation
스크롤 진행량 자체가 애니메이션 진행률을 결정하는 방식.
스크롤에 맞춘 변형·진행 바.
스크롤 트리거와 스크롤 연동은 다르다. 사용자 입력을 과도하게 가로채거나 필수 탐색을 모션에 종속시키지 않는다.
스크롤 스크러빙 Scroll Scrubbing
스크롤 위치로 타임라인의 재생 위치를 앞뒤로 조절하는 방식.
제품 소개·단계별 스토리.
스크롤 트리거와 스크롤 연동은 다르다. 사용자 입력을 과도하게 가로채거나 필수 탐색을 모션에 종속시키지 않는다.
스크롤 리빌 Scroll Reveal
스크롤로 영역이 보이기 시작할 때 내용을 드러내는 표현.
섹션·카드 등장.
스크롤 트리거와 스크롤 연동은 다르다. 사용자 입력을 과도하게 가로채거나 필수 탐색을 모션에 종속시키지 않는다.
스크롤 고정 연출 Sticky Pinning
일정 구간 동안 요소를 고정한 채 주변 콘텐츠나 모션을 진행한다.
제품 설명·스토리텔링.
스크롤 트리거와 스크롤 연동은 다르다. 사용자 입력을 과도하게 가로채거나 필수 탐색을 모션에 종속시키지 않는다.
스크롤 타임라인 Scroll Timeline
스크롤 컨테이너의 진행 위치를 애니메이션 시간축으로 사용하는 개념.
CSS 스크롤 연동.
스크롤 트리거와 스크롤 연동은 다르다. 사용자 입력을 과도하게 가로채거나 필수 탐색을 모션에 종속시키지 않는다.
뷰 타임라인 View Timeline
요소가 스크롤 영역에 진입·통과하는 정도를 진행축으로 사용하는 개념.
화면 진입에 연동한 효과.
스크롤 트리거와 스크롤 연동은 다르다. 사용자 입력을 과도하게 가로채거나 필수 탐색을 모션에 종속시키지 않는다.
관성 스크롤 Inertial Scrolling
입력이 끝난 뒤에도 속도가 감쇠하며 스크롤이 이어지는 동작.
터치 탐색.
스크롤 트리거와 스크롤 연동은 다르다. 사용자 입력을 과도하게 가로채거나 필수 탐색을 모션에 종속시키지 않는다.
오버스크롤 효과 Overscroll Effect
콘텐츠 경계 너머로 조작했을 때 반발·늘어남 등을 보여주는 효과.
스크롤 끝 피드백.
스크롤 트리거와 스크롤 연동은 다르다. 사용자 입력을 과도하게 가로채거나 필수 탐색을 모션에 종속시키지 않는다.
고무줄 반발 Rubber Banding
경계 밖으로 끌면 저항이 커지고 놓으면 복귀하는 탄성 동작.
시트·스크롤·카드 드래그.
스크롤 트리거와 스크롤 연동은 다르다. 사용자 입력을 과도하게 가로채거나 필수 탐색을 모션에 종속시키지 않는다.
드래그 탄성 Drag Elasticity
허용 범위 바깥에서 끌림에 대한 저항·변형을 주는 동작.
카드·슬라이더 조작.
스크롤 트리거와 스크롤 연동은 다르다. 사용자 입력을 과도하게 가로채거나 필수 탐색을 모션에 종속시키지 않는다.
스냅백 Snap-back
취소되거나 유효하지 않은 드래그가 원위치로 돌아오는 동작.
정렬 취소·잘못된 놓기.
스크롤 트리거와 스크롤 연동은 다르다. 사용자 입력을 과도하게 가로채거나 필수 탐색을 모션에 종속시키지 않는다.
스냅 지점 Snap Point
움직임이 정착하도록 지정한 위치.
바텀시트 높이·캐러셀 위치.
스크롤 트리거와 스크롤 연동은 다르다. 사용자 입력을 과도하게 가로채거나 필수 탐색을 모션에 종속시키지 않는다.
속도 기반 애니메이션 Velocity-based Animation
입력 속도를 다음 이동량·관성·전환에 반영하는 방식.
플릭·카드 넘김.
스크롤 트리거와 스크롤 연동은 다르다. 사용자 입력을 과도하게 가로채거나 필수 탐색을 모션에 종속시키지 않는다.
끌어서 닫기 Drag-to-dismiss
패널이나 카드를 끌어 임계 조건을 넘기면 제거·닫는 패턴.
모달·알림·시트.
스크롤 트리거와 스크롤 연동은 다르다. 사용자 입력을 과도하게 가로채거나 필수 탐색을 모션에 종속시키지 않는다.
당겨서 새로고침 모션 Pull-to-refresh Motion
끌기 거리·임계 도달·갱신 상태를 시각적으로 연결한다.
모바일 목록 갱신.
스크롤 트리거와 스크롤 연동은 다르다. 사용자 입력을 과도하게 가로채거나 필수 탐색을 모션에 종속시키지 않는다.
커서 추종 효과 Cursor-follow Effect
오브젝트가 포인터 위치나 움직임을 따라 반응하는 표현.
장식·인터랙티브 배경.
커서 위치만을 유일한 기능 진입 수단으로 만들지 않는다.
Scroll, Drag & Input-driven Motion
Open an entry for its visual reference, comparisons and source-language text.
Parallax 패럴랙스
Moving different elements at different speeds to create a sense of depth.
Depth between background and foreground.
Scroll-triggered and scroll-driven animation are different. Avoid excessive input hijacking or making essential navigation depend on motion.
Scroll-triggered Animation 스크롤 트리거 애니메이션
Starting an animation when a specified scroll position is reached.
Entrance effects when content enters the viewport.
Scroll-triggered and scroll-driven animation are different. Avoid excessive input hijacking or making essential navigation depend on motion.
Scroll-driven Animation 스크롤 구동 애니메이션
Animation whose progress is directly determined by scroll progress.
Scroll-linked transformations and progress bars.
Scroll-triggered and scroll-driven animation are different. Avoid excessive input hijacking or making essential navigation depend on motion.
Scroll Scrubbing 스크롤 스크러빙
Moving an animation timeline forward or backward according to scroll position.
Product introductions and step-by-step stories.
Scroll-triggered and scroll-driven animation are different. Avoid excessive input hijacking or making essential navigation depend on motion.
Scroll Reveal 스크롤 리빌
Revealing content as its region enters view during scrolling.
Section and card entrances.
Scroll-triggered and scroll-driven animation are different. Avoid excessive input hijacking or making essential navigation depend on motion.
Sticky Pinning 스크롤 고정 연출
Keeping an element fixed during a scroll interval while surrounding content or animation progresses.
Product explanations and storytelling.
Scroll-triggered and scroll-driven animation are different. Avoid excessive input hijacking or making essential navigation depend on motion.
Scroll Timeline 스크롤 타임라인
Using a scroll container's progress as an animation timeline.
CSS animations linked to scrolling.
Scroll-triggered and scroll-driven animation are different. Avoid excessive input hijacking or making essential navigation depend on motion.
View Timeline 뷰 타임라인
Using an element's passage into and through a scroll area as an animation-progress axis.
Effects triggered by entering the viewport.
Scroll-triggered and scroll-driven animation are different. Avoid excessive input hijacking or making essential navigation depend on motion.
Inertial Scrolling 관성 스크롤
Scrolling that continues after input ends while velocity gradually decreases.
Touch navigation.
Scroll-triggered and scroll-driven animation are different. Avoid excessive input hijacking or making essential navigation depend on motion.
Overscroll Effect 오버스크롤 효과
Feedback such as resistance or stretching when input moves beyond a content boundary.
Feedback at the end of scrolling.
Scroll-triggered and scroll-driven animation are different. Avoid excessive input hijacking or making essential navigation depend on motion.
Rubber Banding 고무줄 반발
Elastic behavior that increases resistance beyond a boundary and returns on release.
Dragging sheets, scroll areas, and cards.
Scroll-triggered and scroll-driven animation are different. Avoid excessive input hijacking or making essential navigation depend on motion.
Drag Elasticity 드래그 탄성
Resistance or deformation applied when dragging outside an allowed region.
Manipulating cards and sliders.
Scroll-triggered and scroll-driven animation are different. Avoid excessive input hijacking or making essential navigation depend on motion.
Snap-back 스냅백
Returning an invalid or canceled drag to its original position.
Canceled sorting and invalid drops.
Scroll-triggered and scroll-driven animation are different. Avoid excessive input hijacking or making essential navigation depend on motion.
Snap Point 스냅 지점
A specified position at which moving content should settle.
Bottom-sheet heights and carousel positions.
Scroll-triggered and scroll-driven animation are different. Avoid excessive input hijacking or making essential navigation depend on motion.
Velocity-based Animation 속도 기반 애니메이션
Using input velocity to influence subsequent displacement, inertia, or transitions.
Flicks and card swipes.
Scroll-triggered and scroll-driven animation are different. Avoid excessive input hijacking or making essential navigation depend on motion.
Drag-to-dismiss 끌어서 닫기
A pattern that closes or removes a card or panel when a drag crosses a threshold.
Modals, notifications, and sheets.
Scroll-triggered and scroll-driven animation are different. Avoid excessive input hijacking or making essential navigation depend on motion.
Pull-to-refresh Motion 당겨서 새로고침 모션
Motion connecting pull distance, threshold crossing, and refresh status visually.
Refreshing mobile lists.
Scroll-triggered and scroll-driven animation are different. Avoid excessive input hijacking or making essential navigation depend on motion.
Cursor-follow Effect 커서 추종 효과
An effect in which an object follows or responds to pointer position or movement.
Decorative and interactive backgrounds.
Do not make cursor position the only way to access functionality.