有意思的滑鼠指針交互探究

来源:https://www.cnblogs.com/coco1s/archive/2022/06/21/16396016.html
-Advertisement-
Play Games

今天,來實現這樣一個有意思的交互效果: 將原本的滑鼠指針樣式,修改成自己想要的效果,並且添加上一些特殊的交互效果。 修改滑鼠樣式 首先,第一個問題,我們可以看到,上圖中,滑鼠指針的樣式被修改成了一個圓點: 正常而言應該是這樣: 當然,這裡比較簡單,在 CSS 中,我們可以通過 cursor 樣式,對 ...


今天,來實現這樣一個有意思的交互效果:

將原本的滑鼠指針樣式,修改成自己想要的效果,並且添加上一些特殊的交互效果。

修改滑鼠樣式

首先,第一個問題,我們可以看到,上圖中,滑鼠指針的樣式被修改成了一個圓點:

正常而言應該是這樣:

當然,這裡比較簡單,在 CSS 中,我們可以通過 cursor 樣式,對滑鼠指針形狀進行修改。

利用 cursor 修改滑鼠樣式

cursor CSS 屬性設置滑鼠指針的類型,在滑鼠指針懸停在元素上時顯示相應樣式。

cursor: auto;
cursor: pointer;
...
cursor: zoom-out;
/* 使用圖片 */
cursor: url(hand.cur)
/* 使用圖片,並且設置 fallback 兜底 */
cursor: url(hand.cur), pointer;

這個大家應該都清楚,通常而言,在不同場景下,選擇不同滑鼠指針樣式,也是一種提升用戶體驗的手段。


當然,在本交互中,我們並非要將 cursor 游標設置成任一樣式,剛好相反,我們需要將他隱藏

通過 cursor: none 隱藏游標

在這裡,我們通過 cursor: none 隱藏頁面的滑鼠指針:

{
    cursor: none;
}

如此一來,頁面上的滑鼠指針就消失了:

通過全局事件監聽,模擬滑鼠指針

既然,消失了,我們就簡單模擬一個滑鼠指針。

我們首先實現一個 10px x 10px 的圓形 div,設置為基於 <body> 絕對定位:

<div id="g-pointer"></div>
#g-pointer {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    background: #000;
    border-radius: 50%;
}

那麼,在頁面上,我們就得到了一個圓形黑點:

接著,通過事件監聽,監聽 body 上的 mousemove,將小圓形的位置與實時滑鼠指針位置重合:

const element = document.getElementById("g-pointer");
const body = document.querySelector("body");

function setPosition(x, y) {
  element.style.transform  = `translate(${x}px, ${y}px)`;                
}

body.addEventListener('mousemove', (e) => {
  window.requestAnimationFrame(function(){
    setPosition(e.clientX - 5, e.clientY - 5);
  });
});

這樣,如果不設置 cursor: none,將會是這樣一個效果:

再給 body 加上 cursor: none,就相當於模擬了一個滑鼠指針:

在這個基礎上,由於現在的滑鼠指針,實際上是個 div因此我們可以給它加上任意的交互效果

以文章一開頭的例子為例,我們只需要藉助混合模式 mix-blend-mode: exclusion,就能夠實現讓模擬的滑鼠指針能夠智能地在不同背景色下改變自己的顏色。

對於混合模式這個技巧還有所疑問的,可以看看我的這篇文章:利用混合模式,讓文字智能適配背景顏色

完整的代碼:

<p>Lorem ipsum dolor sit amet</p>
<div id="g-pointer-1"></div>
<div id="g-pointer-2"></div>
body {
    cursor: none;
    background-color: #fff;
}
#g-pointer-1,
#g-pointer-2
{
    position: absolute;
    top: 0;
    left: 0;
    width: 12px;
    height: 12px;
    background: #999;
    border-radius: 50%;
    background-color: #fff;
    mix-blend-mode: exclusion;
    z-index: 1;
}
#g-pointer-2 {
    width: 42px;
    height: 42px;
    background: #222;
    transition: .2s ease-out;
}
const body = document.querySelector("body");
const element = document.getElementById("g-pointer-1");
const element2 = document.getElementById("g-pointer-2");
const halfAlementWidth = element.offsetWidth / 2;
const halfAlementWidth2 = element2.offsetWidth / 2;

function setPosition(x, y) { 
    element.style.transform  = `translate(${x - halfAlementWidth}px, ${y - halfAlementWidth}px)`;       element2.style.transform  = `translate(${x - halfAlementWidth2}px, ${y - halfAlementWidth2}px)`;
}

body.addEventListener('mousemove', (e) => {
  window.requestAnimationFrame(function(){
    setPosition(e.clientX, e.clientY);
  });
});

我們就能完美還原出題圖的效果:

完整的代碼,你可以戳這裡:Mouse Cursor Transition

偽類事件觸發

有一點需要註意的是,利用模擬的滑鼠指針去 Hover 元素,Click 元素的時候,會發現這些事件都無法觸發。

這是由於,此時被隱藏的指針下麵,其實懸浮的我們模擬滑鼠指針,因此,所有的 Hover、Click 事件都觸發在了這個元素之上。

當然,這個也非常好解決,我們只需要給模擬指針的元素,添加上 pointer-events: none,阻止預設的滑鼠事件,讓事件透傳即可:

{
    pointer-events: none;
}

滑鼠跟隨,不僅於此

當然,這裡核心就是一個滑鼠跟隨動畫,配合上 cursor: none

而且,滑鼠跟隨,我們不一定一定要使用 JavaScript。

我在 不可思議的純 CSS 實現滑鼠跟隨 一文中,介紹了一種純 CSS 實現的滑鼠跟隨效果,感興趣的也可以看看。

基於純 CSS 的滑鼠跟隨,配合 cursor: none,也可以製作出一些有意思的動畫效果。像是這樣:

CodePen Demo -- Cancle transition & cursor none

最後

本文到此結束,希望對你有幫助

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Linux管理軟體的三種方法: 包管理 使用倉庫管理 編譯安裝 軟體相關概念: ABI: ABI:Application Binary Interface。應用程式的二進位介面。windows和Linux的二進位格式不一樣(ABI標準不同) Windows與Linux不相容 ELF (Executa ...
  • 雲原生時代需要什麼樣的資料庫?如何構建資料庫服務?騰訊雲資料庫技術負責人程彬認為,雲資料庫未來趨勢會從以托管為核心升級到以極致效率為核心,助力業務降本增效。從資料庫管理和應用角度來看,雲廠商、資源、客戶三角關係背後包含了三個維度的效率:系統效率、運營效率、業務效率,當這些效率都做到極致,成本會大幅下 ...
  • 前言 ​ 所謂的 APP 和 H5 打通,是指 H5 集成 JavaScript 數據採集 SDK 後,H5 觸發的事件不直接同步給伺服器,而是先發給 APP 端的數據採集 SDK,經過 APP 端數據採集 SDK 二次加工處理後存入本地緩存再進行同步。 一、App 與 H5 打通原因 1.1 數據 ...
  • 在各類App都要進行實名制的當下,進行身份認證自然不可避免。平時購買火車票、飛機票,住酒店、打游戲等都需要身份認證,如果每次都要輸入那18位的身份證號十分麻煩,手一抖就會出錯。因此,使用華為機器服務身份證識別功能掃描身份證,錄入身份信息就相當方便了。 1. 業務簡介 HMS Core機器學習服務身份 ...
  • 文本格式化標簽 語義 標簽 加粗 <strong> <b> 傾斜 <em> <i> 刪除線 <del> <s> 下劃線 <ins> <u> 盒子標簽 佈局 <div> 獨占一行,大盒子 <span> 一行可以放多個,小盒子 圖像標簽 <img 屬性=... /> 單標簽 | 屬性 | 屬性值 | 說 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 一、vue腳手架 1.簡介 Vue CLI 是一個基於 Vue.js 進行快速開發的完整系統。 2.命令行操作步驟 npm install -g @vue/cli 安裝3.x版本的vue腳手架 vue -V 測試是否安裝成功 vue cr ...
  • 函數 函數是 JavaScript 應用程式的基礎,它幫助你實現抽象層,模擬類,信息隱藏和模塊。在 TypeScript 里,雖然已經支持類,命名空間和模塊,但函數仍然是主要的定義行為的地方。TypeScript 為 JavaScript 函數添加了額外的功能,讓我們可以更容易地使用。 基本示例 和 ...
  • 從Vue3發佈以來,我就一直對其非常感興趣,就一直想著將其投入公司的生產中,但是開始考慮到很多不確定性就暫時對一些很小的功能進行一些嘗試;慢慢的發現組合式Api的形式非常適合開發(個人感覺),尤其是Vue3.2推出了setup語法糖後直呼真香。後面公司的新項目幾乎全部採用了Vue3了。使用Vue3開 ...
一周排行
    -Advertisement-
    Play Games
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...