這是前端挑戰賽 - 12 月版的提交，Glam Up My Markup：冬至
網站已上線：https://plutium-239.github.io/dev.to-frontend-challenge/
我的目標是讓給定的純 HTML 更具互動性？ 、美觀？有用嗎？我透過為所有部分添加一致的樣式，突出顯示重要術語以更快地掌握內容，同時添加更多對比度來做到這一點。我還針對行動佈局優化了該網站，雖然其互動較少，但該網站同樣主題鮮明且實用。
原始碼可在 https://github.com/plutium-239/dev.to-frontend-challenge 公開取得
我想選擇夜空主題，因為冬至使北半球經歷一年中最短的白天。於是，我想起了我們的老朋友particles.js。但現在它已經轉變為 tsParticles，並進行了一系列內存洩漏修復、優化和打字稿重寫。這形成了頁面的背景。我將其配置為不分散注意力，同時看起來活潑且美觀。進行此設定是我沒有預料到的痛苦。最新版本有一個 tsarticles.bundle.js，它應該是您需要的一切，並導出全局變量，以便您可以在一行中開始，但事實並非如此。我嘗試在使用 tsarticles.engine.js 時手動調用它的設置，但無濟於事。這是由於缺乏有用的文件。我還嘗試了 slim 版本，其中有一個範例用法，但它不起作用。我嘗試用舊版本替換該版本（因為我需要的主要是基本行為，而不是新功能），並用 1.43.1 獲得了成功。您可能希望按照自述文件中的說明進行操作，但事實並非如此。
選擇配色方案是一個有趣的巧合。我看過一張 tumblr 貼文/迷因的螢幕截圖，非常喜歡其中的顏色。我確實透過谷歌鏡頭搜尋了更高解析度的圖像並提取了它的顏色。這為我提供了 3 種基色（表面色、原色、活性色）。對於其他顏色，我希望其中一種是紅粉色，另一種是綠色/綠松石色。我選擇了這個範圍內的一些顏色並匹配了陰影，使其與當前的調色板保持一致。我了解了 Colormind 等很棒的工具來嘗試替代調色板。
說到排版，我已經了解 Readex Pro 字體有一段時間了，而且我真的很喜歡它。它既可以用作標題的顯示字體，也可以用作普通文字的基本字體。我確實嘗試了其他幾個（Noto、Raleway），但最終選擇了 Readex Pro。我還考慮過為所有文字使用等寬字體，但此頁面上的內容與該樣式不相容。
接下來是滾動驅動的動畫！我想在真實的網站中使用這些已經有一段時間了，我將它們包含在目錄和標題中。 Firefox （仍然） 存在一些問題，不支援動畫範圍（預設情況下，滾動驅動的動畫本身在標誌1 後面被禁用），所以我必須實現一個hack -ish修復（但您仍然需要啟用該標誌）。
說到內容，我透過兩種方式做到了這一點：
對於傳統頁面，我將清單標記更改為（並學習如何使用）自訂@counter-style - 這是一個非常漂亮的功能！
互動： 我使用 IntersectionObserver API 在 TOC 中新增了滾動指示器。這相當簡單：檢查交集，設定一個類，就是這樣！
慶祝清單項目上還有一個懸停效果，可以顯示整個相應的圖像。我透過 CSS 將圖像設定為 ::after 的內容並使其在懸停時可見。
這利用了 Canvas API 和捲動偵聽器。它看起來很酷，但我不能 100% 確定它是否適合其餘的造型。 ？
我可能還在頁面末尾添加了一個很酷的小秘密？
我的職業不是 UI 設計師/網頁開發人員。事實上，我是一名機器學習研究員。但我設計過應用程式/網站，而且我喜歡發揮創意！
所以，當我看到挑戰貼文時，我覺得這很有趣，但我不認為我會太認真地對待它。然而，我碰巧看到了上面提到的螢幕截圖，以及一個使用舊的 keywords.js 效果的網站，而這兩者一定在某個時刻點擊過。這就是聖誕奇蹟！ ？
我心裡並沒有任何未來的計劃，我覺得我做了我計劃要做的事情，甚至更多。
瀏覽了一些其他人提交的內容，我認為沒有很清楚HTML不能直接編輯。我遵循了這個設定規則，只為 CSS 添加了腳本標籤和連結標籤 - 而不編輯任何實際的標記內容。
該程式碼可在 MIT 許可證下使用。
對於使用 Firefox/基於 Firefox 的瀏覽器（例如 Zen）的任何人，請在 about:config 中開啟 layout.css.scroll-driven-animations.enabled ↩
以上是我提交的前端挑戰賽（12 月 #的詳細內容。更多資訊請關注PHP中文網其他相關文章！
