我提交的前端挑戰賽（12 月 #

這是前端挑戰賽 - 12 月版的提交，Glam Up My Markup：冬至

我建造了什麼

網站已上線：https://plutium-239.github.io/dev.to-frontend-challenge/
我的目標是讓給定的純 HTML 更具互動性？ 、美觀？有用嗎？我透過為所有部分添加一致的樣式，突出顯示重要術語以更快地掌握內容，同時添加更多對比度來做到這一點。我還針對行動佈局優化了該網站，雖然其互動較少，但該網站同樣主題鮮明且實用。

示範

原始碼可在 https://github.com/plutium-239/dev.to-frontend-challenge 公開取得

旅行

主題/CSS

我想選擇夜空主題，因為冬至使北半球經歷一年中最短的白天。於是，我想起了我們的老朋友particles.js。但現在它已經轉變為 tsParticles，並進行了一系列內存洩漏修復、優化和打字稿重寫。這形成了頁面的背景。我將其配置為不分散注意力，同時看起來活潑且美觀。進行此設定是我沒有預料到的痛苦。最新版本有一個 tsarticles.bundle.js，它應該是您需要的一切，並導出全局變量，以便您可以在一行中開始，但事實並非如此。我嘗試在使用 tsarticles.engine.js 時手動調用它的設置，但無濟於事。這是由於缺乏有用的文件。我還嘗試了 slim 版本，其中有一個範例用法，但它不起作用。我嘗試用​​舊版本替換該版本（因為我需要的主要是基本行為，而不是新功能），並用 1.43.1 獲得了成功。您可能希望按照自述文件中的說明進行操作，但事實並非如此。

選擇配色方案是一個有趣的巧合。我看過一張 tumblr 貼文/迷因的螢幕截圖，非常喜歡其中的顏色。我確實透過谷歌鏡頭搜尋了更高解析度的圖像並提取了它的顏色。這為我提供了 3 種基色（表面色、原色、活性色）。對於其他顏色，我希望其中一種是紅粉色，另一種是綠色/綠松石色。我選擇了這個範圍內的一些顏色並匹配了陰影，使其與當前的調色板保持一致。我了解了 Colormind 等很棒的工具來嘗試替代調色板。

說到排版，我已經了解 Readex Pro 字體有一段時間了，而且我真的很喜歡它。它既可以用作標題的顯示字體，也可以用作普通文字的基本字體。我確實嘗試了其他幾個（Noto、Raleway），但最終選擇了 Readex Pro。我還考慮過為所有文字使用等寬字體，但此頁面上的內容與該樣式不相容。

接下來是滾動驅動的動畫！我想在真實的網站中使用這些已經有一段時間了，我將它們包含在目錄和標題中。 Firefox （仍然） 存在一些問題，不支援動畫範圍（預設情況下，滾動驅動的動畫本身在標誌¹ 後面被禁用），所以我必須實現一個hack -ish修復（但您仍然需要啟用該標誌）。

內容/HTML（透過JS）/CSS

說到內容，我透過兩種方式做到了這一點：

1. 透過JS為文字加上高亮 - 本質上需要替換innerHTML，這感覺很糟糕，但無法修改HTML是相當有限的。 我還使用 JS 透過插入元素在簡介中添加了圖像。我這樣做是因為我想為其添加一點淡入效果。最初，我透過該部分的::after 上的CSS 背景來完成此操作，但在各種桌面尺寸和行動裝置上使淡入淡出保持一致（即影像的頂部邊緣不明顯銳利）事實證明這是不可能的。因此，我必須在該部分中添加一個新元素，然後將 ::after 偽元素的樣式限制為圖像本身 - 這效果非常好。
2. 透過 CSS 添加圖像到慶祝活動 - 對於四個慶祝活動中的每一個，我透過各種來源找到了合適的圖片（來源），並透過偽元素添加了這些圖片。我給了他們一個漂亮的視差風格，並在懸停互動時添加了顯示全圖像。由於影像的多樣性，我盡力找到高解析度的影像，然後使用 ImageMagick 將它們調整為統一寬度 800px。我以一種巧妙的方式實現了這一點，利用 .celebration 類別來定義框架，並為每個特定的慶祝活動使用 CSS 變數來定義圖像 URL（和製作人員名單文字）。

對於傳統頁面，我將清單標記更改為（並學習如何使用）自訂@counter-style - 這是一個非常漂亮的功能！

互動： 我使用 IntersectionObserver API 在 TOC 中新增了滾動指示器。這相當簡單：檢查交集，設定一個類，就是這樣！

慶祝清單項目上還有一個懸停效果，可以顯示整個相應的圖像。我透過 CSS 將圖像設定為 ::after 的內容並使其在懸停時可見。

？ 我可能還在頁面末尾添加了一個很酷的小秘密？

這利用了 Canvas API 和捲動偵聽器。它看起來很酷，但我不能 100% 確定它是否適合其餘的造型。

結論

我的職業不是 UI 設計師/網頁開發人員。事實上，我是一名機器學習研究員。但我設計過應用程式/網站，而且我喜歡發揮創意！

所以，當我看到挑戰貼文時，我覺得這很有趣，但我不認為我會太認真地對待它。然而，我碰巧看到了上面提到的螢幕截圖，以及一個使用舊的 keywords.js 效果的網站，而這兩者一定在某個時刻點擊過。這就是聖誕奇蹟！ ？

我心裡並沒有任何未來的計劃，我覺得我做了我計劃要做的事情，甚至更多。

瀏覽了一些其他人提交的內容，我認為沒有很清楚HTML不能直接編輯。我遵循了這個設定規則，只為 CSS 添加了腳本標籤和連結標籤 - 而不編輯任何實際的標記內容。

該程式碼可在 MIT 許可證下使用。

---

1. 對於使用 Firefox/基於 Firefox 的瀏覽器（例如​​ Zen）的任何人，請在 about:config 中開啟 layout.css.scroll-driven-animations.enabled ↩

以上是我提交的前端挑戰賽（12 月 #的詳細內容。更多資訊請關注PHP中文網其他相關文章！