GODRICH
#css애니메이션#버튼#로딩#전환효과#스크롤#대시보드#실전ui#디자인트렌드

마우스 이펙트 9가지 — 커서부터 드래그까지

· Godrich · 9종 · 7분 읽기

인터랙션바닐라 JSCSS만호버클릭랜딩 페이지

마우스 이펙트는 커서를 움직이거나 클릭·드래그·스크롤할 때 화면이 그에 맞춰 반응하는 작은 인터랙션을 말한다. 커서만 움직였을 뿐인데 버튼이 끌려오거나 카드가 기울어지는 것도 여기 속한다.

커서 모양 변신01 cursor-shape-morph-link 마그네틱 풀 버튼02 cursor-magnetic-pull-button 스포트라이트 카드 리빌03 cursor-spotlight-card-reveal 3D 틸트 카드04 cursor-tilt-3d-card 드래그 스크롤 갤러리05 cursor-drag-scroll-gallery 커스텀 우클릭 메뉴06 cursor-context-menu-custom 텍스트 선택 형광펜 색07 cursor-text-selection-highlight 스크롤 진행률 커서 링08 cursor-scroll-progress-ring 호버 캡션 이미지 그리드09 cursor-hover-caption-grid

자동 재생 · 눌러서 해당 항목으로 · 전부 한 zip

아래 아홉 개는 인기순이 아니라 마우스 커서 따라다니는 효과부터 시작해 마우스가 화면 위에서 실제로 겪는 순서다 — 가만히 있다가 링크 위에서 모양이 바뀌고(01), 버튼에 다가가면 끌려오고(02), 카드 위를 지나가면 빛이 따라오고 기울어지고(03·04), 화면을 손으로 끌어당기고(05), 우클릭하면 메뉴가 뜨고(06), 문장을 그으면 색이 칠해지고(07), 페이지를 읽어 내리면 링이 채워지고(08), 마지막으로 그리드를 훑으면 캡션이 올라온다(09). 마우스가 없는 화면에서 같은 동작을 손가락으로 옮긴 판은 모바일 터치 제스처에 있고, 포인터 궤적을 그대로 그림으로 남기는 쪽은 서명 패드와 캔버스 드로잉 UI로 이어집니다.

01커서 모양 변신

마우스 커서 이펙트에서 무엇이 보이나

링크 위로 커서가 올라가면 작은 점이 화살표가 든 파란 원으로 커지고, 벗어나면 다시 점으로 돌아간다.

커서 모양 변신
새 창에서 열기

01 · 커서 모양 변신 — 측정 누적면적 3.019% · 움직인 프레임 16/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

pointermove translatedata-cursor 속성pointer:coarse 터치 제외

코드에서 볼 곳

pointermove로 커서 점의 위치를 옮기고, pointerenter·pointerleave로 모양을 바꾼다.

area.addEventListener('pointermove', function (e) {
  var r = area.getBoundingClientRect();
  cursor.style.transform =
    'translate(' + (e.clientX - r.left) + 'px,' +
    (e.clientY - r.top) + 'px)';
});
link.addEventListener('pointerenter', function () {
  cursor.classList.add('is-link');
});
link.addEventListener('pointerleave', function () {
  cursor.classList.remove('is-link');
});

02마그네틱 풀 버튼

화면에서 일어나는 일

버튼 근처로 커서를 가져가면 버튼이 그 방향으로 살짝 끌려오고, 커서가 멀어지면 원래 자리로 돌아온다.

마그네틱 풀 버튼
새 창에서 열기

02 · 마그네틱 풀 버튼 — 측정 누적면적 6.596% · 움직인 프레임 11/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

pointermove 거리×계수transform: translatepointerleave 리셋

코드 읽는 법

히트 존 중심과 커서의 거리에 계수(0.4)를 곱해 translate 값을 만든다.

zone.addEventListener('pointermove', function (e) {
  var r = zone.getBoundingClientRect();
  var dx = e.clientX - (r.left + r.width / 2);
  var dy = e.clientY - (r.top + r.height / 2);
  btn.style.transform =
    'translate(' + dx * 0.4 + 'px,' + dy * 0.4 + 'px)';
});
zone.addEventListener('pointerleave', function () {
  btn.style.transform = '';
});

03스포트라이트 카드 리빌

어떤 움직임인가

카드 위에서 커서를 움직이면 동그란 빛이 함께 움직이며, 빛이 지나간 자리의 흐린 글자가 밝게 드러난다.

스포트라이트 카드 리빌
새 창에서 열기

03 · 스포트라이트 카드 리빌 — 측정 누적면적 20.166% · 움직인 프레임 17/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

mix-blend-mode: soft-lightpointermove translatehover:none 대체

어디를 바꾸면 되나

mix-blend-mode: soft-light로 빛과 배경을 섞고 screen으로 글자를 밝힌다.

card.addEventListener('pointermove', function (e) {
  var r = card.getBoundingClientRect();
  spot.style.transform =
    'translate(' + (e.clientX - r.left) + 'px,' +
    (e.clientY - r.top) + 'px)';
});
card.addEventListener('pointerleave', function () {
  spot.style.transform = '';
});

043D 틸트 카드

무엇이 보이나

카드 위 커서의 위치에 따라 카드가 입체적으로 기울고, 대각선 광택이 함께 스친다.

3D 틸트 카드
새 창에서 열기

04 · 3D 틸트 카드 — 측정 누적면적 3.769% · 움직인 프레임 17/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

perspective + rotateX/rotateYbackground-position 스윕신뢰감 있는 밝은 톤

코드에서 볼 곳

커서의 좌표를 0~1 비율로 바꿔 rotateX·rotateY 각도를 계산한다.

wrap.addEventListener('pointermove', function (e) {
  var r = wrap.getBoundingClientRect();
  var px = (e.clientX - r.left) / r.width;
  var py = (e.clientY - r.top) / r.height;
  var rx = (0.5 - py) * 6 * 2;
  var ry = (px - 0.5) * 6 * 2;
  card.style.transform =
    'perspective(600px) rotateX(' + rx + 'deg) rotateY(' + ry + 'deg)';
});

05드래그 스크롤 갤러리

화면에서 일어나는 일

타일을 손으로 잡아끌듯 드래그하면 갤러리가 가로로 스크롤되고, 손을 놓으면 그 자리에 멈춘다.

드래그 스크롤 갤러리
새 창에서 열기

05 · 드래그 스크롤 갤러리 — 측정 누적면적 13.938% · 움직인 프레임 20/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

scrollLeft 직접 조작overflow-x: auto 네이티브 터치cursor: grab/grabbing

코드 읽는 법

transform이 아니라 진짜 scrollLeft를 옮기므로 터치에서도 네이티브 스크롤과 자연스럽게 이어진다.

vp.addEventListener('pointerdown', function (e) {
  dragging = true;
  startX = e.clientX;
  startScroll = vp.scrollLeft;
  vp.setPointerCapture(e.pointerId);
});
vp.addEventListener('pointermove', function (e) {
  if (!dragging) return;
  vp.scrollLeft = startScroll - (e.clientX - startX);
});

06커스텀 우클릭 메뉴

어떤 움직임인가

영역을 우클릭하면 브라우저 기본 메뉴 대신 복사·수정·삭제 아이콘 메뉴가 클릭한 자리에 튀어 오르듯 뜬다.

커스텀 우클릭 메뉴
새 창에서 열기

06 · 커스텀 우클릭 메뉴 — 측정 누적면적 13.451% · 움직인 프레임 11/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

contextmenu preventDefault좌표 클램프Escape·바깥 클릭 닫기

어디를 바꾸면 되나

좌표는 영역 경계를 넘지 않도록 클램프한다.

pad.addEventListener('contextmenu', function (e) {
  e.preventDefault();
  var r = pad.getBoundingClientRect();
  var x = Math.min(e.clientX - r.left, r.width - 132);
  var y = Math.min(e.clientY - r.top, r.height - 112);
  menu.style.left = x + 'px';
  menu.style.top = y + 'px';
  pad.classList.add('is-open');
});

07텍스트 선택 형광펜 색

무엇이 보이나

문장을 드래그로 선택하면 브라우저 파란색 대신 지정한 형광펜 색으로 칠해지고, 선택 위로 복사 배지가 뜬다.

텍스트 선택 형광펜 색
새 창에서 열기

07 · 텍스트 선택 형광펜 색 — 측정 누적면적 2.017% · 움직인 프레임 15/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

::selection 색 지정selectionchange 이벤트getBoundingClientRect 배지 위치

코드에서 볼 곳

색은 ::selection 하나로 정하고, 배지 위치는 selectionchange로 잡는다.

::selection {
  background: #ff9ebb;
  color: #17141a;
}

document.addEventListener('selectionchange', function () {
  var sel = window.getSelection();
  if (sel.isCollapsed) return;
  var r = sel.getRangeAt(0).getBoundingClientRect();
  badge.style.left = r.left + r.width / 2 + 'px';
  badge.style.top = r.top - 28 + 'px';
  badge.classList.add('is-shown');
});

08스크롤 진행률 커서 링

화면에서 일어나는 일

안에서 스크롤하는 동안 커서를 따라다니는 작은 링이 진행률만큼 채워지고, 끝까지 읽으면 체크 표시로 바뀐다.

스크롤 진행률 커서 링
새 창에서 열기

08 · 스크롤 진행률 커서 링 — 측정 누적면적 3.108% · 움직인 프레임 22/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

stroke-dashoffsetscrollTop/scrollHeight 비율pointermove translate

코드 읽는 법

링의 stroke-dashoffset을 스크롤 비율만큼 줄인다.

box.addEventListener('scroll', function () {
  var max = box.scrollHeight - box.clientHeight;
  var pct = max > 0 ? box.scrollTop / max : 0;
  ring.style.setProperty('--dash', (94.2 * (1 - pct)).toFixed(1));
  box.classList.toggle('is-done', pct > 0.98);
});

09호버 캡션 이미지 그리드

어떤 움직임인가

그리드 타일에 마우스를 올리면 아래에서 흰 캡션 띠가 올라오며 이름표가 나타나고, 키보드 포커스에도 똑같이 반응한다.

호버 캡션 이미지 그리드
새 창에서 열기

09 · 호버 캡션 이미지 그리드 — 측정 누적면적 10.226% · 움직인 프레임 21/23GODRICH 원작 · zip 에 SCSS·React 포함 · 비밀번호 보기

:hover + :focus-visibletransform: translateYstagger animation-delay

어디를 바꾸면 되나

JS 없이 :hover와 :focus-visible 두 선택자만으로 동작한다.

.hg-tile__cap {
  transform: translateY(100%);
  transition: transform .3s ease-out;
}
.hg-tile:hover .hg-tile__cap,
.hg-tile:focus-visible .hg-tile__cap {
  transform: translateY(0);
}

마우스 이펙트, 어디서 깨지는가

가장 먼저 겪은 함정은 04번 3D 틸트였다. rotateX·rotateY는 시각적으로만 기울어 보일 뿐 레이아웃을 다시 계산하지 않는데도, 320px 폭에서는 회전한 카드의 눈에 보이는 경계 상자가 실제 스크롤 영역에 그대로 잡혀 화면이 옆으로 넘쳤다 — 처음 잡았던 9도로는 넘침이 그대로 남았고, 각도를 6도로 줄이고 카드 자체를 더 작게 잡은 뒤에야 320px 렌더에서 넘침이 사라진 것을 확인했다. 두 번째는 05번 드래그 갤러리다. 손가락으로 드래그하는 동작을 transform으로 흉내 내면 실제 스크롤 위치와 어긋나므로, 진짜 사용자 조작에는 반드시 scrollLeft를 직접 옮겨야 한다. 세 번째는 06번 우클릭 메뉴다 — 좌표를 클램프하지 않으면 화면 오른쪽·아래 끝에서 메뉴가 영역 밖으로 잘려 나간다.

접근성 — 커스텀 커서가 오히려 방해가 될 때

01·03·08번처럼 커서 자체를 따라다니는 요소는 prefers-reduced-motion: reduce에서 움직임을 멈추도록 transition·animation을 전부 꺼둔다. 하지만 진짜 문제는 움직임보다 커서 자체다 — 저시력 사용자나 트랙패드 대신 스위치·조이스틱 같은 보조기기를 쓰는 사람에게 작은 커스텀 커서는 기본 커서보다 오히려 찾기 어렵다. 그래서 01번은 @media (hover: none), (pointer: coarse)로 터치 기기에서 커서 점 자체를 완전히 없애고, 08번은 같은 조건에서 기본 커서로 되돌린다. 02·04번은 애초에 따로 숨길 커서 요소가 없어 포인터에 의존하는 전환만 꺼진다. 03번은 스포트라이트를 끄는 것과 함께 글자 색을 처음부터 밝혀 내용이 항상 읽히게 했다. 05번 드래그 갤러리는 오히려 터치에서 더 잘 동작한다 — 네이티브 스크롤이 그대로 살아 있기 때문이다. 06·07·09번은 마우스 조작(우클릭·드래그 선택·호버)에 각각 키보드·포커스 대체 수단(Escape·키보드 선택·:focus-visible)을 붙여, 마우스가 없어도 같은 기능을 쓸 수 있게 했다. 포인터 좌표를 값으로 바꿔 화면을 다시 그리는 같은 얼개는 CSS 배경 패턴에서 시드 하나로 반복됩니다. 아홉 개 파일의 압축 비밀번호는 c5gmgmdf이고, 압축을 풀면 vanilla·react 폴더에서 같은 아홉 가지 동작을 나란히 비교해 볼 수 있다.

FAQ

마우스 클릭 이펙트까지 CSS만으로 만들 수 있나요?

일부는 그렇다. 07번 텍스트 선택 색과 09번 호버 캡션 그리드는 ::selection과 :hover만으로 동작하는 CSS 전용 효과다. 나머지는 커서 좌표를 읽어야 해서 pointermove 같은 짧은 바닐라 JS가 필요하다. 커서를 따라 장면 전체가 기우는 연출은 마우스를 따라오는 CSS 3D 회전 장면에서 각도 계산까지 풀어 놨습니다.

커스텀 커서를 쓰면 사이트가 느려지나요?

pointermove마다 transform만 바꾸면 레이아웃 재계산이 없어 대부분 부드럽다. 다만 이벤트 안에서 매번 getBoundingClientRect를 다시 재는 대신, 크기가 바뀌지 않는 요소라면 값을 한 번 캐싱해 두는 것이 좋다.

이 효과들은 모바일에서도 그대로 동작하나요?

포인터를 전제로 한 01·02·03·04·08번은 손가락엔 의미가 없어 CSS로 숨기거나 대체 상태를 준다. 05번 드래그 갤러리와 06·07·09번은 터치에서도 자연스럽게 동작하도록 따로 처리했다.

출처: MDN Pointer events, MDN prefers-reduced-motion · 더 보기: 소개, 호버 인터랙션 모음, 랜딩 페이지 인터랙션

압축 비밀번호를 입력하세요

비밀번호는 이 글 본문 안에 있습니다. 읽다 보면 나옵니다.