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

来源: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
  • 用例演示 - 創建實體 本節將演示一些示例用例並討論可選場景。 創建實體 從實體/聚合根類創建對象是實體生命周期的第一步。聚合/聚合根規則和最佳實踐部分 建議為Entity類創建一個主構造函數,以保證創建一個有效的實體。因此,無論何時我們需要創建實體的實例,我們都應該使用那個構造函數 參見下麵的問題 ...
  • 領域邏輯 & 應用邏輯 如前所述,領域驅動設計中的業務邏輯分為兩部分(層):領域邏輯和應用邏輯: 領域邏輯由系統的核心領域規則組成,應用邏輯實現應用特定的用例 雖然定義很明確,但實現起來可能並不容易。您可能無法決定哪些代碼應該位於應用程式層,哪些代碼應該位於領域層。本節試圖解釋其中的差異 多個應用程 ...
  • 表弟大學快畢業了,學了一個學期Python居然還不會寫學生管理系統,真的給我丟臉啊,教他又不肯學,還讓我直接給他寫,我真想兩巴掌上去,最終還是寫了給他,誰讓他是我表弟呢,關鍵時候還是得幫他一把! 寫完了放在那也是放著,所以今天分享給大家吧! 話不多說,咱們直接開始吧! 代碼解析 一、登錄頁面 1、定 ...
  • Zookeeper3.7源碼剖析 能力目標 掌握Zookeeper中Session的管理機制 能基於Client進行Debug測試Session創建/刷新操作 能搭建Zookeeper集群源碼配置 掌握集群環境下Leader選舉啟動過程 能說出Zookeeper選舉過程中的概念 能說出Zookeep ...
  • 前言 今天給大家分享一下我自己寫的筆記,純純的都是乾貨,關於字好像也能看。這是我學python整理出來的一些資料,希望對大家 有用。想要更多的資料那就的給一個關註了… python學習交流Q群:903971231### #導入Counter from collections import Count ...
  • Hi,大家好,我是Mic 一個工作5年的粉絲找到我。 他說: “Mic老師,你要是能回答出這個問題,我就佩服你” 我當場就懵了,現在打賭都這麼隨意了嗎? 我問他問題是什麼,他說“Kafka如何避免重覆消費的問題!” 下麵看看普通人和高手的回答! 普通人: Kafka怎麼避免重覆消費就是我們可以通過 ...
  • 前言 Steam是由美國電子游戲商Valve於2003年9月12日推出的數字發行平臺,被認為是電腦游戲界最大的數位發行平臺之一,Steam平臺是全球最大的綜合性數字發行平臺之一。玩家可以在該平臺購買、下載、討論、上傳和分享游戲和軟體。 而每周的steam會開啟了一輪特惠,可以讓游戲打折,而玩家就會 ...
  • 本篇內容將在上一篇已有的內容基礎上,進一步的聊一下項目中使用JPA的一些高階複雜場景的實踐指導,覆蓋了主要核心的JPA使用場景,可以讓你在需求開發的時候對JPA的使用更加的游刃有餘。 ...
  • 1.路徑處理 1.找模塊:sys.path import sys print(sys.path) - 1.理解 - 1.是python去查找包或模塊 - 2.項目開始根目錄,python內置的目錄 - 3.雖然說python的安裝目錄下也可以存放我們寫的模塊,但是不建議(太多了,不大好找) - 4. ...
  • Go 語言入門練手項目系列 01 基於命令行的圖書的增刪查改 02 文件管理 持續更新中... > 本文來自博客園,作者:Arway,轉載請註明原文鏈接:https://www.cnblogs.com/cenjw/p/gobeginner-proj-bookstore-cli.html 介紹 這是一 ...