Tag: javascript
All the articles with the tag "javascript".
JS 新增的擴充方法 - with() toSpliced() toReversed()
Posted on:2024/02/24 23:15:00在使用框架 vue react 的時候,常常會需要利用陣列的資料來做一些操作,但又不想更改原本的資料,以前就需要先複製一份再做操作,所以 JS 新增了幾個原有方法的擴充,讓開發更佳的便利。
在 body 使用 zoom 時解決 GSAP ScrollTrigger 的觸發點不正確問題
Posted on:2023/12/30 16:44:00如何解決在使用 GSAP ScrollTrigger 與 zoom 一起時,觸發點可能出現的問題。我們將透過 scrollerProxy 方法調整觸發點的位置,確保在不同尺寸裝置上的正確顯示。
結束滾動事件 - Scrollend
Posted on:2023/11/21 20:17:00最近需要評估一個需求,是要在滾動結束後觸發視覺效果,經過搜尋後發現有 `Scrollend` 這個事件可以使用,在此之前如果有類似需求我可能會使用 setTimeout 來做,使用上也不困難。
使用 MutationObserver 來監聽 DOM 的變化
Posted on:2023/10/29 24:17:00優化網頁互動效果!探討在使用 lenis 滾動 library 時可能遭遇的問題,特別是在處理彈跳視窗內容需要滾動的情況下。文章介紹了使用 MutationObserver API 的方法,這能夠監聽 DOM 的變化,進而達成開啟彈跳視窗時動態處理 lenis 的效果。
JS 陣列排序的新方法 - toSorted()
Posted on:2023/06/08 20:30:00優化 JavaScript 陣列排序!新的 toSorted() 方法讓你不必擔心原始陣列變動,直接獲得排序後的結果。相較於傳統 sort(),這個方法省去額外複製陣列的步驟,讓開發更為便利。例子中展示了如何使用 toSorted(),輕鬆獲得排序後的新陣列,同時保留原始陣列。需注意,目前 Firefox 尚未支援此方法,因此在應用時需謹慎。深入了解可參考 MDN 的相關資料。提升排序效率,體驗更順暢的陣列操作!
Intersection Observer - 換個方式來做滾動特效
Posted on:2023/04/07 13:17:00深入介紹了 Intersection Observer,透過這個 API,你可以輕鬆實現滾動相關效果,例如圖片延遲載入、無限滾動、元素淡入淡出等。如何使用 Intersection Observer 監測元素進入或離開視窗,觸發相對應的事件。除了提供基本的功能,API還支援多種參數調整,包括 root、rootMargin、threshold 等,使你更精準地控制元素的觸發時機。
EventSource - 實作一個 ChatGPT 打字機效果
Posted on:2023/04/07 09:17:00探索使用ChatGPT實現打字機效果的神奇之旅!發現透過 「EventSource」 實現 Server-Sent Events (SSE)技術,使瀏覽器和伺服器建立即時單向通信。不僅基於 Http 協議使用純文字傳遞,相比 Socket 更為簡便,且具備即時性、高相容性、網路斷開時可重新連接等優勢。深入了解客戶端和伺服器端的實現方式,並特別留意伺服器端的文字格式約定。透過 Node Express 實現伺服器端模擬,以文字內容創建引人入勝的演示效果。
網頁載入時自動朗讀內容 - 使用 SpeechSynthesisUtterance
Posted on:2023/03/03 09:17:00最近有接到一個 case 是要在網頁載入後,自動朗讀內文的內容,最後使用 JS 內建的 SpeechSynthesisUtterance 來達成這個需求。順便記錄一下遇到的問題,像是換頁不會自行中斷及手機無法自動朗讀等問題。