標籤：HTML

Parallax Scrolling 是指當您在滾動網頁時，讓特定元素以不同的速度移動，創造出一種視覺上的效果，稱為視差滾動。這種技術能讓您的網站看起來更豐富、更時尚感、更具沉浸感，使用視差滾動製作的網頁，您很難不被它吸引。視差滾動網頁製作的困難度非常高，幾乎可以直接另開專案處理，而本文將介紹兩種相對簡單很多的方法，讓您的網站可以輕鬆使用。

這次網站改版，我想在文章右邊加入目錄，並且讓目錄可以根據卷軸位置自動更新顯示，這種功能稱為滾動監聽 (Scrollspy)。Scrollspy 技術很早以前就有了，算不上什麼新技術，所以我本來打算直接使用 Bootstrap 內建的 Scrollspy 製作。在製作過程中，我一直遇到觸發更新事件的捲軸位置不正確的問題。因此，我花時間研究了一下 Scrollspy 原理，並決定自己開發此功能，本文將分享我的製作思路，提供給大家參考。

壓縮程式碼是指在維持同樣功能的狀況下，儘可能減少程式碼數量以減小檔案大小，並加快網頁載入速度。不論是 HTML、CSS 或 JavaScript，都支援壓縮功能。當程式碼壓縮過後，所有無關的註解、空格及換行符號都已經被刪除，您幾乎無法用肉眼閱讀壓縮後的程式碼，因此您需要保留原始的程式檔案以供未來修改。通常我們會在壓縮後的檔名加上 min，例如原始檔名為 app.js，壓縮後的檔名為 app.min.js。

深色模式在過去幾年變得非常流行，它是一種高對比度的顯示模式，能夠減少眼睛疲勞並降低耗電量。傳統的亮色界面，在低光環境下使用電子設備時，容易對眼睛造成不適。深色模式採用較暗的背景和較亮的文字和元素，減輕對眼睛的負擔，降低眼睛疲勞的風險。在本文中，我將向您展示如何讓您的網頁根據作業系統的設定，自動選擇配色方案，並且也會介紹手動切換配色方案的方法。

波浪動畫的特效一般提升網頁的美觀，這些特效一般都不需要與使用者進行互動，因此盡量不要使用到 JavaScript 為佳。簡單的特效盡量使用 CSS 製作，複雜的特效可能就不得不依賴 JavaScript 了。本文參考網路上找到的資料，展示兩種實現網頁波浪動畫的方法，並且這兩種方式皆未使用到 JavaScript。

網頁載入時，最耗費流量的資源大概就是圖片了。為了節省流量的浪費，除了將圖片在可接受畫質的狀況下，盡可能的將檔案大小進行壓縮之外，另一個實用技巧就是延遲載入 (Lazy loading)。我認為延遲載入最明顯的好處有節省流量、降低使用者因等待而跳出及提升 SEO 成效。

自 HTML 5 推出以來，受到很大的歡迎，各大瀏覽器也積極朝 HTML 5 的規範前進。HTML 5 是發展性產品，而非革命性產品，很多新增的元素都相容於舊版瀏覽器。此外，HTML 5 的很多功能都與 Javascript API 相關，包含本機儲存、通訊 API、檔案處理 API......等等，本文將重點整理一些常用元素。