JavaScript30-Day24-Sticky Nav bar

Posted on 2018-09-02 | Edited on 2022-04-26 | In JavaScript30 | Comments: 0

24 - Sticky Nav

筆記

DEMO
GitHub

製作 Sticky Nav bar，讓導航列滑出可視範圍時自動轉變為置頂浮動位置

JavaScript30-Day23-操縱語音播放

Posted on 2018-08-27 | Edited on 2022-04-26 | In JavaScript30 | Comments: 0

23 - Speech Synthesis

筆記

DEMO
GitHub

透過 JavaScript 操縱語音播放

JavaScript30-Day22-用 CSS 實現聚光燈效果的文字

Posted on 2018-08-24 | Edited on 2022-04-26 | In JavaScript30 | Comments: 0

22 - Follow Along Link Highlighter

筆記

DEMO
GitHub

用 CSS 實現聚光燈效果的 highlight 文字

[Vue] 使用 Directive 來註冊客製化指令

Posted on 2018-08-17 | Edited on 2018-08-18 | In Vue.js | Comments: 0

Vue Directive

最近在上 Udemy 上開設的 Vue.js 課程 - Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)，講述了 Directive 的利用，覺得滿有趣的。

除了 Vue 自身內建的 v-model， v-show 等等指令，也可以自行註冊客製化的指令。

JavaScript30-Day21-指南針

Posted on 2018-08-17 | Edited on 2018-08-18 | In JavaScript30 | Comments: 0

21 - Geolocation

筆記

DEMO
GitHub

利用瀏覽器 geolocation API 來製作指南針

JavaScript30-Day20-即時語音辨識

Posted on 2018-08-14 | Edited on 2018-08-18 | In JavaScript30 | Comments: 0

20 - Speech Detection

筆記

DEMO
GitHub

用 JS 操作語音辨識，並即時輸出文字!

JavaScript30-Day19-能添加效果的視訊 canvas

Posted on 2018-08-09 | Edited on 2018-08-18 | In JavaScript30 | Comments: 0

19 - Webcam Fun

筆記

DEMO
GitHub

用 JS 操作視訊鏡頭輸出成 canvas 添加濾鏡效果

JavaScript30-Day18-透過 map 與 reduce 來計算影片總時間

Posted on 2018-08-03 | Edited on 2018-08-18 | In JavaScript30 | Comments: 0

18 - Adding Up Times with Reduce

筆記

DEMO
GitHub

透過精簡的 map() 與 reduce() 搭配來計算影片列表總時間

JavaScript30-Day17-將名稱以 a-z 排序

Posted on 2018-08-01 | Edited on 2018-08-18 | In JavaScript30 | Comments: 0

17 - Sort Without Articles

筆記

DEMO
GitHub

排序品牌名稱(由 A-Z)，並忽略英文冠詞。

JavaScript30-Day16-讓文字陰影跟隨滑鼠移動

Posted on 2018-07-31 | Edited on 2018-08-18 | In JavaScript30 | Comments: 0

16 - Mouse Move Shadow

筆記

DEMO
GitHub

透過 text-shadow 實現滑鼠移動時的文字陰影游移效果