html css cursor pointer 游標 js

Pointer.js:輕鬆更換游標樣式的好用套件

王淳藝 Celia Wang 2022/10/24 11:18:20
288

在一般正常情況下的網頁上,游標都是以一個單純的箭頭來呈現,如果想來點創新的樣式,Pointer.js套件是一個很好的選擇!

----

STEP 1. 下載Pointer.js完整檔案

前往 這個網站  將套件檔案下載,並將 pointer.css 及 pointer.js 分別放入專案中對應的資料夾,再將其引入html檔中。

<link rel="stylesheet" href="../css/pointer.css">

<script src="../js/pointer.js"></script>

 

STEP 2. 使用預設選項初始化套件

在html的<body>結尾之前加上初始化的設定:

<script>
    init_pointer();
</script>

 

STEP 3. 加入定義樣式的設定

在step 2 的設定中加入以下條件:

1. pointerColor --- 更改游標外圍圓圈顏色

2. ringSize --- 設定游標外圈的圓半徑大小

3. ringClickSize --- 設定游標點擊時外圈的圓半徑大小

<script>
  init_pointer({
    pointerColor: 333333,
    ringSize: 20,
    ringClickSize: 10
  });
</script>

在這邊要特別注意的是,這三個條件務必要打上,才不會有產生錯誤的情況發生喔!

 

STEP 4. 調整pointer.css檔案中的參數

接著可以進入pointer.css檔案中,調整各種原先套件預設的參數

#pointer-dot {
  left: 0;
  top: 0;
  width: 5px;
  height: 5px;
  background-color: darkcyan;
  position: fixed;
  border-radius: 4px;
  z-index: 101;
  pointer-events: none;
  -webkit-transition: border-color 0.5s;
  -o-transition: border-color 0.5s;
  transition: border-color 0.5s;
}

#pointer-ring {
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  padding: 15px;
  border: 2px solid rgb(156, 42, 205);
  position: fixed;
  border-radius: 100px;
  z-index: 102;
  pointer-events: none;
}

html {
  cursor: none !important;
}

a {
  cursor: none !important;
}

 

以這個游標舉例,#pointer-dot 是設定中間圓點的樣式,#pointer-ring 則是外圈的圓

在這個css檔中可以把游標客製成自己想要的樣式,只需要調整顏色、大小,其餘的定位架構都不需要再做調整。

不需要複雜的做法就可以讓游標帶來一些新意,下次不妨也試試看吧~

----

套件來源:

https://www.cssscript.com/circle-cursor-pointer/#google_vignette

https://www.cssscript.com/demo/circle-cursor-pointer/

王淳藝 Celia Wang