JavaScript30-Mouse-Move-Shadow-16

恭喜又長大了，長大是日期，還是心靈。
好像經歷過什麼，就會想要有些改變，嘗試著用不同的方式與人相處交心，
一眼瞬間，一抹笑，一個肩膀，一雙手，一個突如其來的擁抱，
好久沒有去看球賽了，原本在出門前還想發現時動態說，
會不會這一輩子都只有自己一個人在看比賽，
但有些事情好像想著想著就會實現，所以想想還是享受過程就好。

現場激昂，輝閃汗水，隨著攻防不斷成長；場邊的我，好像也在成長著，
想著怎麼改變自己，如果以前的話一直失敗，那一定是哪個環節出了問題，
那換個方式來看看這次結果會不會有不同的果實可以摘下呢？

還真的不一樣了，
心急吃不了熱稀飯，揠苗助長也不是真的完美收成。
幸好是個明理的人，
幸好這次是帶著隱形眼鏡看到的，
我想應該是沒有看錯了，
畢竟看得更清楚了一點吧，
很感謝，幼苗並沒有想像的脆弱，
埋進土裡再細心呵護，應該還是會茁壯吧，
等著開花結果的那一天，
沒失敗過，也學學失敗要怎麼補救，
品嚐甜美的時候，更會痛哭流涕的，

加油吧，小幼苗，希望我不會澆太多水，
希望不會因為在你成長的時候不斷的噓寒問暖，而厭煩的枯萎，
今天就是你的生日了，重生的日子，

許我一個願：
說到我會好好接受你的細心照料，
說到過程艱辛，也會不畏風吹日曬，
說到儘管不如預期，也會愉悅的接受這些過程，
好嗎？ 生日快樂了。

很抱歉，我的心急，但說再多抱歉也沒有什麼用，

我會記得擁擠的城市，也有安靜的街燈，
街燈下，緊張的心情，
牆角裡，堅毅的宣言，
有些不知所啜的泛紅，
心動不會隨著年紀改變，心動不分新舊。
有的時候就是一個瞬間，就有著那一刻真美的感覺，
人來人往，應該也覺得逗趣的畫面，看起來不違和吧。

張開眼睛其實有點清醒，不知道該說些什麼才能照料好這株以萌芽的嫩綠。

這篇的內容相對簡單很多，
沒有什麼好多敘述的事情XDD，

蠻開心自己當初有想要做這件事情，
紀錄自己的人生，紀錄自己不會的地方，
紀錄自己的成長，紀錄重要的日子，
寫著寫著多了一份動力，多了一件想完成的事情，
雖然好像有點像一見傾心，
但隨著成長，其實越知道自己想要的是怎樣的未來，
越知道需要的是怎麼樣的朋友，
更清楚，誰在我身邊我會是開心的吧。

如果記憶是一個罐頭，我希望它永遠不會過期 - 重慶森林

16 - Mouse Move Shadow

首次上傳：2020/11/22

主題

透過textShadow讓文字的陰影隨滑鼠位置偏移，
並稍微帶到ES6的解構賦值的用法。

步驟

Step1. 設定目標區域與基本偏移量

1. 抓取HTML中的hero與text做為目標區域
2. 設定基本偏移基準walk = 100

Step2. 建立觸發條件與事件

1. 設定hero.addEventListener('mousemove', shadow)
2. 觸發事件備註：

   function shadow(e) {
     // 透過解構賦值取得並設定資訊
     const { offsetHeight: height,
             offsetWidth: width } = hero;
     let { offsetX: x,
           offsetY: y  } = e;
     // 如果在目標區域外，則在加上目標座標值
     if (this !== e.target) {
       x = x + e.target.offsetLeft;
       y = y + e.target.offsetTop;
     }
     // 四捨五入最終偏移值
     const xWalk = Math.round((x / width * walk) - (walk/2));
     const yWalk = Math.round((y / height * walk) - (walk/2));
     console.log(xWalk, yWalk);
     // 使用textShadow來設定文字陰影
     text.style.textShadow = `
       ${xWalk}px ${yWalk}px 0px rgba(0, 0, 0, 0.5),
       ${xWalk * -1}px ${yWalk}px 0px rgba(0, 0, 0, 0.5),
       ${yWalk}px ${xWalk * -1}px 0px rgba(0, 0, 0, 0.5),
       ${yWalk * -1}px ${xWalk}px 0px rgba(0, 0, 0, 0.5)
       `
   }

Javascript語法&備註

解構賦值(Destructuring assignment)
透過解構賦值，可以把直接把物件/陣列中的值塞入變數中，
擷取一小段程式碼做說明：

// 下面這段等同於 const height = hero.offsetHeight;
const { offsetHeight: height } = hero;
// 下面這段等同於 let x = e.offsetX;
let { offsetX: x } = e;

參閱:MDN-Destructuring assignment
關於解構賦值對我來說目前還是需要很用力的去閱讀才能讀懂，
雖然可以簡寫並縮短不少程式碼，但使用上滿不直覺的，
所以我自己目前還是會用舊的賦值寫法多，努力中。

Math.round
可以將內容的數值進行四捨五入的動作。

參閱:MDN-Math.round()

CSS語法備註

/* offset-x | offset-y | blur-radius | color */
text-shadow: 1px 1px 2px black;

參閱:MDN-text-shadow

[DEMO]