커서를위한 다음 레벨 CSS 스타일

웹 사이트 커서 스타일은 종종 간과되지만 사용자 경험을 향상시킬 수있는 상당한 잠재력을 제공합니다. 일관성을 유지하는 것은 사용자의 혼란을 피하기 위해 중요하지만, 정교한 커서 사용자 정의는 신중한 계획으로 달성 할 수 있습니다. 사용자 정의 커서는 터치 인터페이스에서 보이지 않아 도달 범위를 제한합니다.

Geoff의 기사, "더 나은 사용자 경험 (또는 재미)을 위해 CSS로 커서를 변경하는 것"은 탄탄한 기초를 제공합니다. 이 기사는보다 진보 된 기술을 탐구합니다.

자바 스크립트 구동 커스텀 커서

CSS만으로는 제한된 커서 스타일 옵션을 제공합니다. JavaScript는 새로운 수준의 사용자 정의를 잠금 해제합니다. JavaScript 제어 요소를 커서로 사용하면 전환, 임베디드 텍스트, 복잡한 애니메이션 및 필터를 포함하여 동적으로 스타일을 지정할 수 있습니다.

가장 간단한 접근법은 다음과 같습니다<div> <code>mousemove 이벤트 리스너를 사용하여 마우스 위치를 반영합니다. mousedown 청취자는 대화식 효과를 추가 할 수 있습니다.

이 기본 예제는 클릭시 클릭 가능한 커서를 만듭니다. 커서의 위치는 페이지에 대한 마우스 좌표에 의해 결정됩니다. 그러나 기본 커서는 계속 표시됩니다. 완전히 교체하려면 cursor: none; CSS 스타일 시트 ( * 에 적용)에. 문서 높이가 완전히 채워지지 않으면 일부 브라우저가 기본 커서를 표시 할 수 있습니다.

커스텀 커서가 상호 작용을 방해하는 것을 방지하려면 pointer-events: none; 커서 요소에. 클래스 추가 (예 : "Pressable")를 사용하면 특정 요소에 맞춤형 호버 효과가 발생할 수 있습니다.

이것은 시각적으로 매력적인 원형 커서를 만듭니다.

접근성, 폴백 및 터치 스크린

터치 스크린 사용자의 경우 사용자 정의 커서가 불필요하며 비활성화 될 수 있습니다. 마찬가지로, prefers-reduced-motion 선호도를 가진 사용자는 더 간단한 커서를 선호 할 수 있습니다. 이것은 JavaScript로 달성 할 수 있습니다.

 Window ||에서 const istouchdevice = "OntouchStart" navigator.maxtouchpoints> 0;
const는 SreferSreducedMotion = Window.matchMedia ( "(선호하는 감소 모션 : 감소)". 일치;

if (! istouchdevice &&! prefersreducedMotion && cursor) {
  // 여기에서 커서 구현
}

이를 통해 사용자 정의 커서는 JavaScript가 활성화되고 사용자가 터치 스크린에 있지 않거나 모션 감소를 선호하는 경우에만 나타납니다. JavaScript가 없으면 브라우저의 기본 커서가 사용됩니다.

더 부드러운 폴백 경험의 경우 CSS 정의 폴백 커서를 고려하십시오.

 html {
  커서 : URL ( "데이터 : image/svg XML; Base64, PHN2ZYB4BWXUCZ0IAHR0CDOVL3D3D3DY53MY5VCMJAWMC9ZDMCIIHDPZHROPSIZMIIGAGVPZ2H0PSIZMI igdmlld0jved0imcawidmyiij4kica8y2lyy2xlign4psixniigy3k9ije2iibypsixniigzmlsbd0iymxhy2siic8 cjwvc3znpg == ") 16 16, 자동;
}

이것은 단순한 32x32 Base64- 인코딩 된 원을 사용하며 16 16 값은 커서 핫스팟을 중심으로합니다.

고급 사용자 정의

가능성은 광대합니다. 시각적 효과, 복잡한 애니메이션에 필터를 추가하거나 실제 위치에서 커서를 상쇄하는 것을 고려하십시오.

다음은 몇 가지 영감을주는 예입니다.

• Studio Mesmer : 사용자 정의 눈 그래픽을 사용합니다.
• Iara Grinspun의 포트폴리오 : 부유하고 약간 지연된 원형 커서가 특징입니다.
• Marlène Bruhat의 포트폴리오 : 그라디언트 백그라운드 효과와 매끄러운 커서를 묶습니다.
• Aleksandr Yaremenko의 포트폴리오 : 간단하면서도 눈에 띄는 커서.
• 테라 : 호버 정보를 표시하는 큰 빛나는 구의.

접근성 우선 순위를 정하는 것을 잊지 마십시오. 커스텀 커서를 신중하고 제한하여 사용하십시오.