iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 16
0

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> 元素的置中方式是利用 flexjustify-content: center 以及 align-items: center 屬性。因此<h1> 元素的中心點座標即為整個頁面的中心點座標,而我們可以使用前面提過的 window.innerWidth 以及 window.innerHeight 來取得。
而滑鼠的座標,也可以利用監聽滑鼠事件時的屬性來取得,但是這次我們將不會使用到 offsetXoffsetY 這個屬性。這是因為在前面有提過,這個屬性值代表的是滑鼠在該元素下的相對座標,如果使用這個來當作我們計算分身移動的位置,將會在滑鼠從 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之間關係

上一篇
JS30-Day15-LocalStorage
下一篇
JS30-Day17-Sort Without Articles
系列文
新手也能懂的JS3030
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言