鐵人檔案
Geolocation based Speedometer and Compass地理方位 獲取使用者的位置資訊，將它顯示在畫面上。 個人codepen 技巧...
Follow Along Link Highlighter 滑鼠hover特效 這次的效果覺得有點像是css hover的加強版，當你移動到特定的文字身上時，會...
Speech Synthesis文字轉換成語音 前幾天才接觸過Web Speech API，這次也是。不過，這次是將輸入好的文字，轉換成語音。並且可以選擇發音的...
Sticky Nav 這次的功能非常實用，很多網站都有類似的效果。底下的導覽列，當使用者將視窗滾動到導覽列要消失在視窗的時候，導覽列就會釘在最上面。當你滾動回去...
Event Capture, Propagation, Bubbling and Once 這次是介紹事件捕捉、事件冒泡、停止冒泡、事件監聽。當你很清楚這些事件...
Stripe Follow Along Dropdown 伸縮自如的下拉選單 這次的練習是網頁中很常見到的頂部導覽列，當你滑鼠移動進入其中一個導覽項目時，會跑出...
Click and Drag to Scroll 滑鼠按著拖曳滾動 這效果感覺像是swiper一樣，可以用滑鼠去拖曳滾動整個容器，畢竟滑鼠的滾輪預設行為是上下滾...
Video Speed Controller UI 客製化影片播放速度條 前面有練習過客製化影片播放器，這次則是針對影片的播放速度做一個速度條，可以將他刻的美觀...
Countdown Clock 倒數計時器 提供使用者直接輸入想要倒數的分鐘數，另外也提供快捷鍵的倒數選項。一邊告訴你剩下多少時間，底下也顯示幾點幾分時間到。...
Whack a mole! 冒版打地鼠 按下開始按鈕後，地鼠就會一直冒出來，同時間螢幕會顯示倒數的秒數，每打到一次地鼠就會加分，分數也要同時顯示在畫面。時間到之...
