借隻貓手 cursor

貓手幫你點擊！(=①ω①=)

這個元件的靈感來自日文諺語「 猫の手も借りたい」，意思是「忙到連貓的手都想借來用」

不同於諺語的部分是這個元件真的有貓手！ԅ(´∀` ԅ)

TIP

此元件針對滑鼠設計，建議使用電腦或可以使用滑鼠的裝置瀏覽。

技術關鍵字

名稱	描述
JS 動畫	基於 JavaScript 實現的動畫，達成更複雜、精準的動畫控制，常見套件有 GSAP、anime.js 等
向量計算	處理方向、加速度、速度等等數學運算
Anime.js	輕量級 JavaScript 動畫函式庫
Pointer 事件	偵測滑鼠或觸控點移動、點擊、懸停等等事件，取得座標、目標等等資訊
Document activeElement	取得目前擁有焦點的元素
Document elementsFromPoint()	取得指定座標位置的所有元素

使用範例

基本用法

貓手跟隨滑鼠與元素互動產生變化

顯示游標

POINTER

NOT_ALLOWED

查看範例原始碼

<template>
  <div class="w-full flex flex-col gap-4 rounded-xl py-10">
    <div class="flex flex-col select-none items-center justify-center gap-[6vh]">
      <base-checkbox
        v-model="visible"
        label="顯示游標"
        class="cursor-pointer border border-l-4 p-4"
      />

      <div class="card bg-pointer cursor-pointer p-4">
        POINTER
      </div>

      <div class="card bg-not-allowed cursor-not-allowed p-4 text-red-900">
        NOT_ALLOWED
      </div>
    </div>

    <cursor-lend-a-paw
      v-if="visible"
      z-index="9999"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import BaseCheckbox from '../../base-checkbox.vue'
import CursorLendAPaw from '../cursor-lend-a-paw.vue'

interface Props {
  visible?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  visible: true,
})

const visible = ref(props.visible)
</script>

<style lang="sass" scoped>
.card
  font-weight: 700
  transition-duration: 0.3s
.bg-pointer
  background-color: #FFF
  background-image: linear-gradient(45deg, #EEE 25%, transparent 25%, transparent 75%, #EEE 75%, #EEE), linear-gradient(45deg, #EEE 25%, transparent 25%, transparent 75%, #EEE 75%, #EEE)
  background-size: 10px 10px
  background-position: 0 0, 5px 5px
.bg-not-allowed
  background: repeating-linear-gradient(135deg,  #ffadad 0 10px,  #fff 10px 20px)
</style>

原理

使用 Zdog 繪製貓手，並透過 JS 動畫模擬貓手的動作

後記

原本苦惱要怎麼繪製貓手，3D 找不到合適的模型，自己畫好麻煩；SVG 不能模擬 3D 動作；DOM 形狀太死板，複雜度又高。

一直找不到理想中適合的繪製方式，導致元件就這樣擱置了好久。( ˘･з･)

直到意外發現 Zdog 這個超酷的套件，這個元件終於順利問世了。✧⁑｡٩(ˊᗜˋ*)و✧⁕｡

原始碼

元件

、範例

API

Props

interface Props {
  zIndex?: string | number;
}