Day16-課題內容

轉眼間我們的 JS30 之路已經完成一半了！
今天要來實作一個頁面的影分身之術。在頁面剛開啟時，只有中間一個字串'影分身之術!!'，但是當我們移動滑鼠的瞬間，其上下左右出現了不同顏色的字串，並隨著滑鼠移動而在本體的周圍移動。此外我們可以修改影分身之術的本體，分身們也會跟著改變！
實作連結

進入課題

要完成今天的分身課題，我們要完成以下的修煉：

1. 創造分身
2. 讓分身移動

步驟一

要讓我們的字串元素分身，我們要先來認識 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 屬性，我們成為網頁上忍的日子指日可待！

參考資料

1. javascript30
2. W3schools-text-shadow Property
3. JS一秒區分clientX,offsetX,screenX,pageX之間關係