레이아웃
무한 마키
그대로 보십시오. 글 줄이 끊김 없이 흐릅니다. 마우스를 올리면 멈춥니다.
PLAY. EXPLORE. CREATE.
움직임을 보고,
다음 장면을 만드세요.
대문부터 작은 상호작용까지.
직접 움직여 보고 고르는 모션 아카이브.
빛을 반사하고, 커서에 반응하는 형태.화면 안에서 움직여 보세요 ↗
THE COLLECTION
모션 라이브러리 71
NO.이름 / 체험 방법예제 → 레퍼런스
스크롤
쌓이는 카드
천천히 아래로 스크롤해 보십시오. 카드가 위로 하나씩 쌓입니다.
스크롤
스크롤 진행 바
이 구역에서 스크롤하며 화면 맨 위 상단바 밑의 주황 막대를 보십시오. 읽은 만큼 찹니다.
마우스 · 버튼
사진 호버 확대
마우스를 사진 위에 올려 보십시오. 사진이 칸 안에서 커집니다. (마우스가 있는 화면에서 — 휴대폰은 해당 없음)
글자 · 등장
사진 마스크 펼침
«다시 보기» 를 누르십시오. 사진이 가운데서 펼쳐지며 나타납니다.
스크롤
상단바 줄어들기 · 내리면 숨기
이 구역에서 아래로 조금 내렸다가 위로 올려 보십시오. 상단바가 줄고 숨었다가 다시 나옵니다.
레이아웃
페이지 넘김
버튼을 눌러 다른 화면에 갔다가 «돌아가기» 를 누르십시오. 화면이 부드럽게 녹아 바뀝니다.
마우스 · 버튼
링크 밑줄 그어지기
아래 글 속 링크에 마우스를 올려 보십시오. 밑줄이 왼쪽부터 그어집니다. (마우스가 있는 화면에서 — 휴대폰은 해당 없음)
마우스 · 버튼
롤링 글자 버튼
버튼에 마우스를 올려 보십시오. 글자가 위로 굴러 바뀝니다. (마우스가 있는 화면에서 — 휴대폰은 해당 없음)
스크롤
섹션 색 전환
천천히 아래로 스크롤해 보십시오. 아래 두 구역이 화면 가운데에 오면 화면 바탕색이 바뀝니다.
스크롤
바닥글 드러남
버튼을 누른 뒤 조금 더 내려 보십시오. 본문이 위로 걷히며 뒤에 고정된 바닥글이 드러납니다.
마우스 · 버튼
카드 커서 조명
마우스를 카드 위에서 움직여 보십시오. 커서 자리에 빛이 따라옵니다. (마우스가 있는 화면에서 — 휴대폰은 해당 없음)
마우스 · 버튼
카드 3D 기울기
마우스를 카드 위에서 움직여 보십시오. 카드가 커서 쪽으로 기웁니다. (마우스가 있는 화면에서 — 휴대폰은 해당 없음)
마우스 · 버튼
벤토 그리드 호버
마우스를 칸 위에 올려 보십시오. 올린 칸이 살짝 커지고 나머지는 옅어집니다. (마우스가 있는 화면에서 — 휴대폰은 해당 없음)
글자 · 등장
격자 차례 등장 방향
«다시 보기» 를 누르십시오. 가운데 카드부터 바깥으로 차례로 나타납니다.
스크롤
날아들고 빠지는 목록
천천히 위아래로 스크롤해 보십시오. 카드가 들어올 때 옆에서 날아들고, 위로 빠질 때 날아 나갑니다.
글자 · 등장
텍스트 스크램블
«다시 보기» 를 누르십시오. 무작위 글자가 제 글자로 풀립니다.
글자 · 등장
타자기
그대로 보십시오. 강조 문구가 한 글자씩 쳐지고 지워지며 바뀝니다.
레이아웃
노이즈 · 그레인 질감
이 판의 바탕을 보십시오. 고운 입자 질감이 깔려 있습니다.
레이아웃
움직이는 메시 배경
이 판의 바탕을 잠시 보십시오. 빛 덩어리가 아주 천천히 떠다닙니다.
마우스 · 버튼
보더 빔
그대로 보십시오. 칸 테두리를 따라 빛이 돕니다.
마우스 · 버튼
원뿔 그라디언트 포인터
마우스를 카드 근처에서 움직여 보십시오. 커서 쪽 테두리가 빛납니다. (마우스가 있는 화면에서 — 휴대폰은 해당 없음)
마우스 · 버튼
카드 뒤집기
카드 아래 «뒤집기» 버튼을 눌러 보십시오. 카드가 뒤집혀 뒷면 설명이 보입니다.
레이아웃
스크롤 그림자
아래 표를 옆으로 밀어 보십시오. 더 볼 것이 남은 쪽 끝에 그림자가 생깁니다.
레이아웃
CSS 캐러셀 점 · 버튼
아래 화살표나 점을 누르거나 가로로 넘겨 보십시오. 예시 카드가 이동합니다.
레이아웃
스켈레톤 반짝임
그대로 보십시오. 회색 뼈대 위로 빛이 지나갑니다(목록을 불러오는 동안의 모습).
마우스 · 버튼
누름 리플
버튼을 눌러 보십시오. 누른 자리에서 물결이 퍼집니다.
글자 · 등장
물결 글자
«다시 보기» 를 누르십시오. 글자가 한 번 출렁이며 나타납니다.
스크롤
스크롤 따라 글 채우기
천천히 아래로 스크롤해 보십시오. 단어가 하나씩 진해지며 문장이 채워집니다.
스크롤
숫자 롤링(오도미터)
«다시 보기» 를 누르십시오. 자리마다 숫자가 굴러 멈춥니다.
스크롤
선 그리기(연혁 · 과정)
천천히 아래로 스크롤해 보십시오. 세로 선이 그어지며 점이 차례로 켜집니다.
스크롤
핀 고정 가로 스크롤
천천히 아래로 스크롤해 보십시오. 화면이 멈춘 채 카드가 가로로 흘러갑니다.
스크롤
스크롤 연동 확대 대문
천천히 아래로 스크롤해 보십시오. 사진이 커지며 화면을 채웁니다.
레이아웃
카드가 커져 상세로
사진 카드를 누르고 목록으로 돌아와 보십시오. 같은 사진이 커지며 다음 화면으로 이어집니다.
레이아웃
풀스크린 메뉴 오버레이
상단바 오른쪽 ☰ 버튼을 눌러 보십시오. 메뉴가 화면 전체를 덮으며 열립니다(Esc 로 닫힘). 상단바가 숨어 있으면 위로 조금 올리면 나옵니다.
레이아웃
화면 커튼 전환
버튼 셋 중 하나를 눌러 보십시오. 그 커튼으로 다음 화면이 들어옵니다.
마우스 · 버튼
마그네틱 버튼
커서를 버튼 가까이 천천히 가져가 보십시오. 버튼이 커서 쪽으로 살짝 끌려옵니다. (마우스가 있는 화면에서 — 휴대폰은 해당 없음)
스크롤
스크롤 속도 반응 마키
빠르게 스크롤했다가 멈춰 보십시오. 흐르는 줄이 빨라졌다가 다시 가라앉습니다.
레이아웃
3D 회전 캐러셀
아래 화살표를 누르거나 카드를 옆으로 끌어 보십시오. 원통처럼 돕니다.
레이아웃
넘기는 카드 묶음
«다음» 을 누르거나 맨 위 카드를 옆으로 끌어 보십시오. 카드가 넘어가 맨 뒤로 갑니다.
글자 · 등장
곡선 따라 흐르는 글
그대로 보십시오. 오른쪽 원을 따라 글이 돕니다.
레이아웃
아이콘 모프
상단바 ☰ 버튼을 눌러 보십시오. 세 줄이 ✕ 로 바뀌고, 닫으면 돌아옵니다. 상단바가 숨어 있으면 위로 조금 올리면 나옵니다.
글자 · 등장
흩어졌다 모이는 글자
«다시 보기» 를 누르십시오. 흩어진 글자가 제자리로 모입니다.
스크롤
역방향 스크롤 기둥
넓은 화면에서 천천히 스크롤해 보십시오. 가운데 기둥만 반대 방향으로 흐릅니다(좁은 화면에서는 멈춘 격자).
글자 · 등장
굵기 변하는 글자
MOTION 글자 가까이 마우스를 움직여 보십시오. 가까운 글자부터 굵어집니다. 터치에서는 제목이 그대로 보입니다.
마우스 · 버튼
커서 추종 · 호버 미리보기
목록의 글 위에서 마우스를 움직여 보십시오. 예시 그림이 커서 옆에서 따라옵니다. 터치에서는 목록을 누를 수 있습니다.
마우스 · 버튼
이미지 트레일
대문 위에서 마우스를 크게 움직여 보십시오. 지나간 자리에 사진이 차례로 남았다 사라집니다. (마우스가 있는 화면에서 — 휴대폰은 해당 없음)
마우스 · 버튼
리퀴드 버튼 호버
버튼에 마우스를 올렸다가 빼 보십시오. 들어온 쪽에서 색이 번지고 나간 쪽으로 빠집니다. (마우스가 있는 화면에서 — 휴대폰은 해당 없음)
스크롤
영상 스크럽
천천히 아래로 스크롤해 보십시오. 화면이 선 채 내린 만큼 영상이 앞으로 재생되고, 올리면 되감깁니다.
스크롤
스크롤 따라 다시 늘어서는 사진
넓은 화면에서 천천히 아래로 스크롤해 보십시오. 흩어진 사진이 한 줄로 모였다가 격자로 늘어섭니다(900px 이하는 처음부터 격자).
스크롤
구역을 넘나드는 사진
넓은 화면에서 천천히 아래로 스크롤해 보십시오. 사진 한 장이 아래 구역들로 옮겨 가며 오른쪽 → 왼쪽 → 위 → 뒤로 자리와 크기를 바꿉니다(900px 이하는 제 자리에 선 사진).
그래픽 NEW
사진 셰이더 일렁임
사진 위에서 커서를 움직여 보십시오. 커서 주위로 물결이 번집니다.
그래픽 NEW
커서 따라 번지는 잉크
화면 위에서 커서를 크게 움직여 보십시오. 색이 번지고 소용돌이칩니다.
그래픽 NEW
입자 흐름
잠시 보거나 커서를 움직여 보십시오. 입자가 흐르며 커서를 피해 갈라집니다.
그래픽 NEW
셰이더 슬라이드 전환
다음 화살표를 누르십시오. 사진이 일렁이며 다른 장면으로 바뀝니다.
그래픽 NEW
깊이 갤러리
천천히 스크롤해 보십시오. 사진 사이를 앞으로 지나갑니다.
그래픽 NEW
구겨진 종이 펴짐
다시 보기를 누르십시오. 접힌 그림이 펼쳐집니다.
3D · 물리 NEW
구 · 나선 3D 갤러리
구를 옆으로 끌거나 방향키를 눌러 보십시오. 정지 버튼으로 회전을 멈춥니다.
3D · 물리 NEW
무한 끌기 사진 판
사진 판을 잡고 옆으로 밀어 보십시오. 놓아도 잠시 흐르다가 멈춥니다.
3D · 물리 NEW
줄에 매달린 명찰
카드를 잡아 옆으로 움직였다 놓아 보십시오. 줄 끝에서 흔들리며 멈춥니다.
3D · 물리 NEW
떨어지는 태그 더미
태그를 잡아 던지거나 다시 떨어뜨리기를 눌러 보십시오.
3D · 물리 NEW
회전 지구본
지구본을 끌어 돌려 보십시오. 아래 목록은 예시 도시입니다. 지형은 시각화용 간략 윤곽입니다.
대문 NEW
거대 글자 키네틱
커서를 움직이고 아래로 스크롤해 보십시오. 큰 글자가 기울고 흩어집니다.
대문 NEW
글자 속 영상
스크롤을 내리십시오. 글자에 비치는 영상이 커지며 화면으로 펼쳐집니다.
대문 NEW
커서로 드러내기
커서를 움직이거나 사진 전체 보기를 누르십시오. 덮개 뒤의 그림이 드러납니다.
대문 NEW
겹 깊이 시차
커서를 좌우로 움직여 보십시오. 여러 장의 그림이 서로 다른 깊이로 움직입니다.
대문 NEW
첫 장면 연출
다시 보기를 누르십시오. 장막과 그림, 제목이 순서대로 나타납니다.
대문 NEW
카드 셔플 쌓기
카드가 바뀌는 모습을 보거나 다음 버튼을 누르십시오.
대문 NEW
3D 오브젝트
커서를 움직여 보십시오. 빛을 반사하는 형체가 회전합니다. 오른쪽 아래에서 멈출 수 있습니다.
대문 NEW
오로라 광원
빛이 흐르는 모습을 보십시오. 정지 버튼으로 움직임을 멈춥니다.
대문 NEW
타이포 그래픽 폭발
커서를 제목 위로 움직여 보십시오. 글자 조각이 흩어졌다 다시 모입니다.
찾는 모션이 없습니다. 다른 검색어나 분류를 골라보세요.
레퍼런스는 기법을 살펴보는 출처입니다. 예제는 마르다 웹엔진으로 구현했습니다.
일부 효과는 마우스나 지원 브라우저가 필요하며, 움직임 줄이기 설정을 따릅니다.