科幻游標 cursor

酷酷的科幻游標 (⌐■_■)b

TIP

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

技術關鍵字

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

使用範例

基本用法

根據觸碰元素變換樣式

顯示游標

POINTER

NOT_ALLOWED

WAIT

查看範例原始碼

<template>
  <div class="font-orbitron w-full flex flex-col select-none gap-4 py-10">
    <div class="flex flex-col 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 class="card cursor-wait border-x-[3px] border-sky-200 px-1">
        <div class="h-full w-full flex flex-center bg-sky-100 p-4 px-8">
          WAIT
        </div>
      </div>
    </div>

    <cursor-futuristic v-if="visible" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import BaseCheckbox from '../../base-checkbox.vue'
import CursorFuturistic from '../cursor-futuristic.vue'

interface Props {
  visible?: boolean;
}

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

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

<style lang="sass" scoped>
@import url('https://fonts.googleapis.com/css2?family=Orbitron:[email protected]&display=swap')

.font-orbitron
  font-family: "Orbitron", sans-serif

.card
  font-weight: 700
  transition-duration: 0.3s
  &:hover
    opacity: 0.3

.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>

原理

特別利用了 anime.js v4 的 createAnimatable，這個功能可以保證同一個動畫元素被不斷重複呼叫時，不但可以流暢轉換，更不會讓動畫重疊導致關鍵幀錯位。

大家可以試試看讓游標在不同的樣式間快速變化，可以發現游標動畫不只非常流暢，還不會卡在某個關鍵幀上。◝( •ω• )◟

anime.js v4 的 createAnimatable 和 Vue 的響應式系統真的是天作之合，有機會來寫一篇文章分享分享。♪( ◜ω◝و(و

原始碼

元件

、範例

API

Props

interface Props {
  state?: `${CursorState}`;
}