轉眼間我們的 JS30 之路已經完成一半了!
今天要來實作一個頁面的影分身之術。在頁面剛開啟時,只有中間一個字串'影分身之術!!',但是當我們移動滑鼠的瞬間,其上下左右出現了不同顏色的字串,並隨著滑鼠移動而在本體的周圍移動。此外我們可以修改影分身之術的本體,分身們也會跟著改變!
實作連結
要完成今天的分身課題,我們要完成以下的修煉:
要讓我們的字串元素分身,我們要先來認識 text-shadow
這個 CSS 屬性。[2]text-shadow
:透過這個 CSS 屬性,我們可以將我們的字串加上陰影。
text-shadow: h-shadow v-shadow blur-radius color;
h-shadow:陰影距離原始字串於水平方向上的座標。
v-shadow:陰影距離原始字串於垂直方向上的座標。
blur-radius:陰影的模糊半徑,預設值為0。
color:陰影的顏色,若無給值則預設為跟本體字串的顏色相同。
透過在 text-shadow
屬性值當中加入重複的屬性值,我們就可以產生多個陰影,如此一來就可以先完成分身這個動作。
要讓我們的分身動起來,就要靠改變 h-shadow
以及 v-shadow
的值。
而我們可以發現把滑鼠移到本體中心,分身會躲到我們的原始字串後面。也就是說當滑鼠的座標為元素的中心的時候,這兩個屬性值為零。因此我們要找出元素的中心點座標。
可以從作者的程式碼發現, <h1>
元素的置中方式是利用 flex
的 justify-content: center
以及 align-items: center
屬性。因此<h1>
元素的中心點座標即為整個頁面的中心點座標,而我們可以使用前面提過的 window.innerWidth
以及 window.innerHeight
來取得。
而滑鼠的座標,也可以利用監聽滑鼠事件時的屬性來取得,但是這次我們將不會使用到 offsetX
或 offsetY
這個屬性。這是因為在前面有提過,這個屬性值代表的是滑鼠在該元素下的相對座標,如果使用這個來當作我們計算分身移動的位置,將會在滑鼠從 window
移入 <h1>
元素的時候發生分身瞬間移動的問題,因此這次我們要使用 clientX
以及 clientY
這個屬性。clientX
以及 clientY
屬性值代表的是滑鼠相對顯示頁面的位置。[3]
綜合以上兩個步驟,就可以將我們的影分身之術程式碼寫出來:
let shadowElement = document.querySelector('h1');
//將window加上監聽事件 mousemove 以及觸發函式
window.addEventListener('mousemove', shadowEffect);
function shadowEffect (event) {
//取得目前滑鼠於頁面上的X座標
let mouseX = event.clientX;
//取得目前滑鼠於頁面上的X座標
let mouseY = event.clientY;
//取得目前頁面上的中心點X座標
let centerX = window.innerWidth/2;
//取得目前頁面上的中心點Y座標
let centerY = window.innerHeight/2;
//計算出分身應該移動的距離
let moveX = centerX - mouseX;
let moveY = centerY - mouseY;
//將計算出的 text-shadow 屬性值加給 <h1> 元素
shadowElement.style.textShadow = `
${moveX}px ${-moveY}px 0 rgba(255,0,255,0.7),
${-moveX}px ${moveY}px 0 rgba(0,255,255,0.7),
${-moveY}px ${-moveX}px 0 rgba(0,255,0,0.7),
${moveY}px ${moveX}px 0 rgba(0,0,255,0.7)`;
};
完成以上的修煉之後,就可以在頁面中成功使出影分身之術。而這邊想要提一下 contenteditable
這個 HTML 屬性。如果在我們的 HTML 元素中加上這個屬性,我們就可以直接在頁面上以輸入的方式,修改該物件的 textContent
。
今天我們將 CSS text-shadow
屬性,與 滑鼠事件的 clientX
以及 clientY
屬性結合起來,成功在頁面上施展影分身之術。相信透過了解更多 javascript 方法與 CSS 屬性,我們成為網頁上忍的日子指日可待!