Tag: web-api
All the articles with the tag "web-api".
使用 MutationObserver 來監聽 DOM 的變化
Posted on:2023/10/29 24:17:00優化網頁互動效果!探討在使用 lenis 滾動 library 時可能遭遇的問題,特別是在處理彈跳視窗內容需要滾動的情況下。文章介紹了使用 MutationObserver API 的方法,這能夠監聽 DOM 的變化,進而達成開啟彈跳視窗時動態處理 lenis 的效果。
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 實現伺服器端模擬,以文字內容創建引人入勝的演示效果。