Web Motion Atlas / 웹 모션 도감

사용 전 확인 본문과 읽는 순서를 유지하고 기본 스크롤을 막지 마세요. 움직임 감소 시 완성 상태를 표시하세요.

다음 효과를 HTML·CSS·JavaScript로 구현하세요.
스크롤 타임라인 / Timeline on scroll
스크롤에 따라 선이 길어지고 주요 단계가 차례로 나타납니다.
사용 예: 연혁, 제작 과정, 도입 절차
scroll + transform
본문과 읽는 순서를 유지하고 기본 스크롤을 막지 마세요. 움직임 감소 시 완성 상태를 표시하세요.
위의 대상·입력·변화를 따르세요. 320px, 키보드, prefers-reduced-motion을 지원하고 읽기 순서와 포커스를 유지하세요.

사용 전 확인 본문과 읽는 순서를 유지하고 기본 스크롤을 막지 마세요. 움직임 감소 시 완성 상태를 표시하세요.

다음 효과를 HTML·CSS·JavaScript로 구현하세요.
스크롤 텍스트 리빌 / Scroll text reveal
읽는 위치에 따라 글자 색이 바뀌며 문장이 드러납니다.
사용 예: 짧은 메시지와 브랜드 소개
scroll + opacity
본문과 읽는 순서를 유지하고 기본 스크롤을 막지 마세요. 움직임 감소 시 완성 상태를 표시하세요.
위의 대상·입력·변화를 따르세요. 320px, 키보드, prefers-reduced-motion을 지원하고 읽기 순서와 포커스를 유지하세요.

사용 전 확인 본문과 읽는 순서를 유지하고 기본 스크롤을 막지 마세요. 움직임 감소 시 완성 상태를 표시하세요.

다음 효과를 HTML·CSS·JavaScript로 구현하세요.
스태킹 카드 / Stacking cards
다음 카드가 아래에서 겹쳐지고 이전 카드는 뒤로 물러납니다.
사용 예: 서비스 소개와 연속된 사례
scroll + transform
본문과 읽는 순서를 유지하고 기본 스크롤을 막지 마세요. 움직임 감소 시 완성 상태를 표시하세요.
위의 대상·입력·변화를 따르세요. 320px, 키보드, prefers-reduced-motion을 지원하고 읽기 순서와 포커스를 유지하세요.

사용 전 확인 본문과 읽는 순서를 유지하고 기본 스크롤을 막지 마세요. 움직임 감소 시 완성 상태를 표시하세요.

다음 효과를 HTML·CSS·JavaScript로 구현하세요.
배경색 전환 / Background color change
읽는 위치에 맞춰 배경의 색 구성이 바뀝니다.
사용 예: 장 구분과 주제 전환
scroll + background-color
본문과 읽는 순서를 유지하고 기본 스크롤을 막지 마세요. 움직임 감소 시 완성 상태를 표시하세요.
위의 대상·입력·변화를 따르세요. 320px, 키보드, prefers-reduced-motion을 지원하고 읽기 순서와 포커스를 유지하세요.

사용 전 확인 본문과 읽는 순서를 유지하고 기본 스크롤을 막지 마세요. 움직임 감소 시 완성 상태를 표시하세요.

다음 효과를 HTML·CSS·JavaScript로 구현하세요.
스크롤 시 숨는 헤더 / Hide-on-scroll header
아래로 읽으면 메뉴가 숨고 위로 돌아가면 나타납니다.
사용 예: 긴 글과 모바일 내비게이션
scroll direction + transform
본문과 읽는 순서를 유지하고 기본 스크롤을 막지 마세요. 움직임 감소 시 완성 상태를 표시하세요.
위의 대상·입력·변화를 따르세요. 320px, 키보드, prefers-reduced-motion을 지원하고 읽기 순서와 포커스를 유지하세요.

사용 전 확인 본문과 읽는 순서를 유지하고 기본 스크롤을 막지 마세요. 움직임 감소 시 완성 상태를 표시하세요.

다음 효과를 HTML·CSS·JavaScript로 구현하세요.
스크롤스파이 / Scrollspy
현재 읽는 구간에 맞춰 목차의 선택 상태가 바뀝니다.
사용 예: 긴 설명과 제품 사양
scroll position + aria-current
본문과 읽는 순서를 유지하고 기본 스크롤을 막지 마세요. 움직임 감소 시 완성 상태를 표시하세요.
위의 대상·입력·변화를 따르세요. 320px, 키보드, prefers-reduced-motion을 지원하고 읽기 순서와 포커스를 유지하세요.

사용 전 확인 본문과 읽는 순서를 유지하고 기본 스크롤을 막지 마세요. 움직임 감소 시 완성 상태를 표시하세요.

다음 효과를 HTML·CSS·JavaScript로 구현하세요.
맨 위로 버튼 / Back to top
아래로 이동하면 버튼이 나타나고 누르면 처음으로 돌아갑니다.
사용 예: 긴 목록과 글의 재탐색
scrollTo + focus
본문과 읽는 순서를 유지하고 기본 스크롤을 막지 마세요. 움직임 감소 시 완성 상태를 표시하세요.
위의 대상·입력·변화를 따르세요. 320px, 키보드, prefers-reduced-motion을 지원하고 읽기 순서와 포커스를 유지하세요.

사용 전 확인 본문과 읽는 순서를 유지하고 기본 스크롤을 막지 마세요. 움직임 감소 시 완성 상태를 표시하세요.

다음 효과를 HTML·CSS·JavaScript로 구현하세요.
스크롤 확대 / Scroll zoom
풍경을 확대해 대상에 가까이 다가갑니다.
사용 예: 제품 세부와 주요 이미지
scroll + scale
본문과 읽는 순서를 유지하고 기본 스크롤을 막지 마세요. 움직임 감소 시 완성 상태를 표시하세요.
위의 대상·입력·변화를 따르세요. 320px, 키보드, prefers-reduced-motion을 지원하고 읽기 순서와 포커스를 유지하세요.

사용 전 확인 호버를 필수로 요구하지 마세요. 터치와 키보드에도 같은 내용을 제공하세요. 입력 예시는 기기 내에서만 작동합니다.

다음 효과를 HTML·CSS·JavaScript로 구현하세요.
3D 기울기 / 3D tilt
포인터 위치에 따라 카드가 입체적으로 기울어집니다.
사용 예: 작품 카드와 제품 소개
pointermove + perspective
호버를 필수로 요구하지 마세요. 터치와 키보드에도 같은 내용을 제공하세요. 입력 예시는 기기 내에서만 작동합니다.
위의 대상·입력·변화를 따르세요. 320px, 키보드, prefers-reduced-motion을 지원하고 읽기 순서와 포커스를 유지하세요.

사용 전 확인 호버를 필수로 요구하지 마세요. 터치와 키보드에도 같은 내용을 제공하세요. 입력 예시는 기기 내에서만 작동합니다.

다음 효과를 HTML·CSS·JavaScript로 구현하세요.
스포트라이트 호버 / Spotlight hover
포인터를 따라 빛이 움직이며 카드 테두리를 비춥니다.
사용 예: 기능 선택과 항목 강조
radial-gradient + Pointer Events
호버를 필수로 요구하지 마세요. 터치와 키보드에도 같은 내용을 제공하세요. 입력 예시는 기기 내에서만 작동합니다.
위의 대상·입력·변화를 따르세요. 320px, 키보드, prefers-reduced-motion을 지원하고 읽기 순서와 포커스를 유지하세요.

사용 전 확인 호버를 필수로 요구하지 마세요. 터치와 키보드에도 같은 내용을 제공하세요. 입력 예시는 기기 내에서만 작동합니다.

다음 효과를 HTML·CSS·JavaScript로 구현하세요.
호버 이미지 전환 / Image swap on hover
호버나 탭으로 제품의 다른 색상이나 모습을 보여 줍니다.
사용 예: 색상과 앞뒤 비교
opacity + :focus-visible
호버를 필수로 요구하지 마세요. 터치와 키보드에도 같은 내용을 제공하세요. 입력 예시는 기기 내에서만 작동합니다.
위의 대상·입력·변화를 따르세요. 320px, 키보드, prefers-reduced-motion을 지원하고 읽기 순서와 포커스를 유지하세요.

사용 전 확인 호버를 필수로 요구하지 마세요. 터치와 키보드에도 같은 내용을 제공하세요. 입력 예시는 기기 내에서만 작동합니다.

다음 효과를 HTML·CSS·JavaScript로 구현하세요.
텍스트 롤 / Text roll
글자가 위로 이동하고 다음 글자가 아래에서 나타납니다.
사용 예: 짧은 링크와 메뉴
overflow + translateY
호버를 필수로 요구하지 마세요. 터치와 키보드에도 같은 내용을 제공하세요. 입력 예시는 기기 내에서만 작동합니다.
위의 대상·입력·변화를 따르세요. 320px, 키보드, prefers-reduced-motion을 지원하고 읽기 순서와 포커스를 유지하세요.

사용 전 확인 호버를 필수로 요구하지 마세요. 터치와 키보드에도 같은 내용을 제공하세요. 입력 예시는 기기 내에서만 작동합니다.

다음 효과를 HTML·CSS·JavaScript로 구현하세요.
호버 이미지 미리보기 / Hover image preview
목록 항목에 닿으면 해당 장소의 이미지가 나타납니다.
사용 예: 작품 목록과 여행지 비교
pointermove + focus
호버를 필수로 요구하지 마세요. 터치와 키보드에도 같은 내용을 제공하세요. 입력 예시는 기기 내에서만 작동합니다.
위의 대상·입력·변화를 따르세요. 320px, 키보드, prefers-reduced-motion을 지원하고 읽기 순서와 포커스를 유지하세요.

사용 전 확인 호버를 필수로 요구하지 마세요. 터치와 키보드에도 같은 내용을 제공하세요. 입력 예시는 기기 내에서만 작동합니다.

다음 효과를 HTML·CSS·JavaScript로 구현하세요.
플로팅 라벨 / Floating label
입력하면 라벨이 위로 올라가 항목 이름을 유지합니다.
사용 예: 문의와 신청 양식
label + :placeholder-shown
호버를 필수로 요구하지 마세요. 터치와 키보드에도 같은 내용을 제공하세요. 입력 예시는 기기 내에서만 작동합니다.
위의 대상·입력·변화를 따르세요. 320px, 키보드, prefers-reduced-motion을 지원하고 읽기 순서와 포커스를 유지하세요.

사용 전 확인 호버를 필수로 요구하지 마세요. 터치와 키보드에도 같은 내용을 제공하세요. 입력 예시는 기기 내에서만 작동합니다.

다음 효과를 HTML·CSS·JavaScript로 구현하세요.
인라인 유효성 검사 / Inline validation
입력란 가까이에 오류와 수정 결과를 표시합니다.
사용 예: 이메일 주소 형식 확인
ValidityState + aria-invalid
호버를 필수로 요구하지 마세요. 터치와 키보드에도 같은 내용을 제공하세요. 입력 예시는 기기 내에서만 작동합니다.
위의 대상·입력·변화를 따르세요. 320px, 키보드, prefers-reduced-motion을 지원하고 읽기 순서와 포커스를 유지하세요.

사용 전 확인 호버를 필수로 요구하지 마세요. 터치와 키보드에도 같은 내용을 제공하세요. 입력 예시는 기기 내에서만 작동합니다.

다음 효과를 HTML·CSS·JavaScript로 구현하세요.
로딩 버튼 / Loading button
처리 중과 완료를 보여 주고 반복 입력을 막습니다.
사용 예: 저장과 전송의 결과 안내
disabled + aria-busy
호버를 필수로 요구하지 마세요. 터치와 키보드에도 같은 내용을 제공하세요. 입력 예시는 기기 내에서만 작동합니다.
위의 대상·입력·변화를 따르세요. 320px, 키보드, prefers-reduced-motion을 지원하고 읽기 순서와 포커스를 유지하세요.

사용 전 확인 내용 접근을 유지하고 정지나 닫기 수단을 제공하세요. 효과를 지원하지 않아도 내용을 볼 수 있어야 합니다.

다음 효과를 HTML·CSS·JavaScript로 구현하세요.
뷰 트랜지션 / View transition
같은 이미지를 유지하며 카드에서 상세 화면으로 이동합니다.
사용 예: 목록에서 상세 화면으로 이동
document.startViewTransition
내용 접근을 유지하고 정지나 닫기 수단을 제공하세요. 효과를 지원하지 않아도 내용을 볼 수 있어야 합니다.
위의 대상·입력·변화를 따르세요. 320px, 키보드, prefers-reduced-motion을 지원하고 읽기 순서와 포커스를 유지하세요.

사용 전 확인 내용 접근을 유지하고 정지나 닫기 수단을 제공하세요. 효과를 지원하지 않아도 내용을 볼 수 있어야 합니다.

다음 효과를 HTML·CSS·JavaScript로 구현하세요.
라이트박스 / Lightbox
이미지를 크게 열고 닫으면 원래 위치로 돌아갑니다.
사용 예: 사진과 도표 확대
dialog.showModal + close
내용 접근을 유지하고 정지나 닫기 수단을 제공하세요. 효과를 지원하지 않아도 내용을 볼 수 있어야 합니다.
위의 대상·입력·변화를 따르세요. 320px, 키보드, prefers-reduced-motion을 지원하고 읽기 순서와 포커스를 유지하세요.

사용 전 확인 내용 접근을 유지하고 정지나 닫기 수단을 제공하세요. 효과를 지원하지 않아도 내용을 볼 수 있어야 합니다.

다음 효과를 HTML·CSS·JavaScript로 구현하세요.
핫스폿 / Hotspots
그림의 표시를 누르면 해당 부분의 설명이 열립니다.
사용 예: 제품 구조와 시설 안내
button + aria-expanded
내용 접근을 유지하고 정지나 닫기 수단을 제공하세요. 효과를 지원하지 않아도 내용을 볼 수 있어야 합니다.
위의 대상·입력·변화를 따르세요. 320px, 키보드, prefers-reduced-motion을 지원하고 읽기 순서와 포커스를 유지하세요.

사용 전 확인 내용 접근을 유지하고 정지나 닫기 수단을 제공하세요. 효과를 지원하지 않아도 내용을 볼 수 있어야 합니다.

다음 효과를 HTML·CSS·JavaScript로 구현하세요.
카운트다운 / Countdown timer
남은 시간을 표시하고 0이 되면 멈춥니다.
사용 예: 마감과 행사 시작 안내
performance.now + timeout
내용 접근을 유지하고 정지나 닫기 수단을 제공하세요. 효과를 지원하지 않아도 내용을 볼 수 있어야 합니다.
위의 대상·입력·변화를 따르세요. 320px, 키보드, prefers-reduced-motion을 지원하고 읽기 순서와 포커스를 유지하세요.

사용 전 확인 내용 접근을 유지하고 정지나 닫기 수단을 제공하세요. 효과를 지원하지 않아도 내용을 볼 수 있어야 합니다.

다음 효과를 HTML·CSS·JavaScript로 구현하세요.
움직이는 구분선 / Animated shape divider
물결이 움직이며 위아래 구간을 연결합니다.
사용 예: 첫 화면 하단과 장 구분
SVG path + transform
내용 접근을 유지하고 정지나 닫기 수단을 제공하세요. 효과를 지원하지 않아도 내용을 볼 수 있어야 합니다.
위의 대상·입력·변화를 따르세요. 320px, 키보드, prefers-reduced-motion을 지원하고 읽기 순서와 포커스를 유지하세요.

사용 전 확인 내용 접근을 유지하고 정지나 닫기 수단을 제공하세요. 효과를 지원하지 않아도 내용을 볼 수 있어야 합니다.

다음 효과를 HTML·CSS·JavaScript로 구현하세요.
좋아요 애니메이션 / Like animation
누르면 하트가 튀어 오르고 선택 상태가 바뀝니다.
사용 예: 즐겨찾기와 저장 반응
aria-pressed + Web Animations
내용 접근을 유지하고 정지나 닫기 수단을 제공하세요. 효과를 지원하지 않아도 내용을 볼 수 있어야 합니다.
위의 대상·입력·변화를 따르세요. 320px, 키보드, prefers-reduced-motion을 지원하고 읽기 순서와 포커스를 유지하세요.

사용 전 확인 내용 접근을 유지하고 정지나 닫기 수단을 제공하세요. 효과를 지원하지 않아도 내용을 볼 수 있어야 합니다.

다음 효과를 HTML·CSS·JavaScript로 구현하세요.
스크롤 안내 / Scroll cue
아래로 움직여 다음 내용을 알리고 누르면 이동합니다.
사용 예: 첫 화면에서 본문으로 안내
scrollIntoView + focus
내용 접근을 유지하고 정지나 닫기 수단을 제공하세요. 효과를 지원하지 않아도 내용을 볼 수 있어야 합니다.
위의 대상·입력·변화를 따르세요. 320px, 키보드, prefers-reduced-motion을 지원하고 읽기 순서와 포커스를 유지하세요.

사용 전 확인 내용 접근을 유지하고 정지나 닫기 수단을 제공하세요. 효과를 지원하지 않아도 내용을 볼 수 있어야 합니다.

다음 효과를 HTML·CSS·JavaScript로 구현하세요.
배경 동영상 / Background video
앞의 글을 읽을 수 있도록 배경에서 영상을 재생합니다.
사용 예: 여행, 공간, 브랜드 소개
video + muted + playsinline
내용 접근을 유지하고 정지나 닫기 수단을 제공하세요. 효과를 지원하지 않아도 내용을 볼 수 있어야 합니다.
위의 대상·입력·변화를 따르세요. 320px, 키보드, prefers-reduced-motion을 지원하고 읽기 순서와 포커스를 유지하세요.