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

我建造了什麼

網(wǎng)站已上線：https://plutium-239.github.io/dev.to-frontend-challenge/
我的目標(biāo)是讓給定的純 HTML 更具互動(dòng)性？ 、美觀？有用嗎？我透過(guò)為所有部分添加一致的樣式，突出顯示重要術(shù)語(yǔ)以更快地掌握內(nèi)容，同時(shí)添加更多對(duì)比度來(lái)做到這一點(diǎn)。我還針對(duì)行動(dòng)佈局優(yōu)化了該網(wǎng)站，雖然其互動(dòng)較少，但該網(wǎng)站同樣主題鮮明且實(shí)用。

示範(fàn)

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

旅行

主題/CSS

我想選擇夜空主題，因?yàn)槎潦贡卑肭蚪?jīng)歷一年中最短的白天。於是，我想起了我們的老朋友particles.js。但現(xiàn)在它已經(jīng)轉(zhuǎn)變?yōu)?tsParticles，並進(jìn)行了一系列內(nèi)存洩漏修復(fù)、優(yōu)化和打字稿重寫。這形成了頁(yè)面的背景。我將其配置為不分散注意力，同時(shí)看起來(lái)活潑且美觀。進(jìn)行此設(shè)定是我沒(méi)有預(yù)料到的痛苦。最新版本有一個(gè) tsarticles.bundle.js，它應(yīng)該是您需要的一切，並導(dǎo)出全局變量，以便您可以在一行中開(kāi)始，但事實(shí)並非如此。我嘗試在使用 tsarticles.engine.js 時(shí)手動(dòng)調(diào)用它的設(shè)置，但無(wú)濟(jì)於事。這是由於缺乏有用的文件。我還嘗試了 slim 版本，其中有一個(gè)範(fàn)例用法，但它不起作用。我嘗試用??舊版本替換該版本（因?yàn)槲倚枰闹饕腔拘袨?，而不是新功能），並用 1.43.1 獲得了成功。您可能希望按照自述文件中的說(shuō)明進(jìn)行操作，但事實(shí)並非如此。

選擇配色方案是一個(gè)有趣的巧合。我看過(guò)一張 tumblr 貼文/迷因的螢?zāi)唤貓D，非常喜歡其中的顏色。我確實(shí)透過(guò)谷歌鏡頭搜尋了更高解析度的圖像並提取了它的顏色。這為我提供了 3 種基色（表面色、原色、活性色）。對(duì)於其他顏色，我希望其中一種是紅粉色，另一種是綠色/綠松石色。我選擇了這個(gè)範(fàn)圍內(nèi)的一些顏色並匹配了陰影，使其與當(dāng)前的調(diào)色板保持一致。我了解了 Colormind 等很棒的工具來(lái)嘗試替代調(diào)色板。

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

接下來(lái)是滾動(dòng)驅(qū)動(dòng)的動(dòng)畫(huà)！我想在真實(shí)的網(wǎng)站中使用這些已經(jīng)有一段時(shí)間了，我將它們包含在目錄和標(biāo)題中。 Firefox （仍然） 存在一些問(wèn)題，不支援動(dòng)畫(huà)範(fàn)圍（預(yù)設(shè)情況下，滾動(dòng)驅(qū)動(dòng)的動(dòng)畫(huà)本身在標(biāo)誌¹ 後面被禁用），所以我必須實(shí)現(xiàn)一個(gè)hack -ish修復(fù)（但您仍然需要啟用該標(biāo)誌）。

內(nèi)容/HTML（透過(guò)JS）/CSS

說(shuō)到內(nèi)容，我透過(guò)兩種方式做到了這一點(diǎn)：

1. 透過(guò)JS為文字加上高亮 - 本質(zhì)上需要替換innerHTML，這感覺(jué)很糟糕，但無(wú)法修改HTML是相當(dāng)有限的。 我還使用 JS 透過(guò)插入元素在簡(jiǎn)介中添加了圖像。我這樣做是因?yàn)槲蚁霝槠涮砑右稽c(diǎn)淡入效果。最初，我透過(guò)該部分的::after 上的CSS 背景來(lái)完成此操作，但在各種桌面尺寸和行動(dòng)裝置上使淡入淡出保持一致（即影像的頂部邊緣不明顯銳利）事實(shí)證明這是不可能的。因此，我必須在該部分中添加一個(gè)新元素，然後將 ::after 偽元素的樣式限制為圖像本身 - 這效果非常好。
2. 透過(guò) CSS 添加圖像到慶?；顒?dòng) - 對(duì)於四個(gè)慶?；顒?dòng)中的每一個(gè)，我透過(guò)各種來(lái)源找到了合適的圖片（來(lái)源），並透過(guò)偽元素添加了這些圖片。我給了他們一個(gè)漂亮的視差風(fēng)格，並在懸?；?dòng)時(shí)添加了顯示全圖像。由於影像的多樣性，我盡力找到高解析度的影像，然後使用 ImageMagick 將它們調(diào)整為統(tǒng)一寬度 800px。我以一種巧妙的方式實(shí)現(xiàn)了這一點(diǎn)，利用 .celebration 類別來(lái)定義框架，並為每個(gè)特定的慶祝活動(dòng)使用 CSS 變數(shù)來(lái)定義圖像 URL（和製作人員名單文字）。

對(duì)於傳統(tǒng)頁(yè)面，我將清單標(biāo)記更改為（並學(xué)習(xí)如何使用）自訂@counter-style - 這是一個(gè)非常漂亮的功能！

互動(dòng)： 我使用 IntersectionObserver API 在 TOC 中新增了滾動(dòng)指示器。這相當(dāng)簡(jiǎn)單：檢查交集，設(shè)定一個(gè)類，就是這樣！

慶祝清單項(xiàng)目上還有一個(gè)懸停效果，可以顯示整個(gè)相應(yīng)的圖像。我透過(guò) CSS 將圖像設(shè)定為 ::after 的內(nèi)容並使其在懸停時(shí)可見(jiàn)。

結(jié)論

我的職業(yè)不是 UI 設(shè)計(jì)師/網(wǎng)頁(yè)開(kāi)發(fā)人員。事實(shí)上，我是一名機(jī)器學(xué)習(xí)研究員。但我設(shè)計(jì)過(guò)應(yīng)用程式/網(wǎng)站，而且我喜歡發(fā)揮創(chuàng)意！

所以，當(dāng)我看到挑戰(zhàn)貼文時(shí)，我覺(jué)得這很有趣，但我不認(rèn)為我會(huì)太認(rèn)真地對(duì)待它。然而，我碰巧看到了上面提到的螢?zāi)唤貓D，以及一個(gè)使用舊的 keywords.js 效果的網(wǎng)站，而這兩者一定在某個(gè)時(shí)刻點(diǎn)擊過(guò)。這就是聖誕奇蹟！ ？

我心裡並沒(méi)有任何未來(lái)的計(jì)劃，我覺(jué)得我做了我計(jì)劃要做的事情，甚至更多。

瀏覽了一些其他人提交的內(nèi)容，我認(rèn)為沒(méi)有很清楚HTML不能直接編輯。我遵循了這個(gè)設(shè)定規(guī)則，只為 CSS 添加了腳本標(biāo)籤和連結(jié)標(biāo)籤 - 而不編輯任何實(shí)際的標(biāo)記內(nèi)容。

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

1. 對(duì)於使用 Firefox/基於 Firefox 的瀏覽器（例如?? Zen）的任何人，請(qǐng)?jiān)?about:config 中開(kāi)啟 layout.css.scroll-driven-animations.enabled ?

以上是我提交的前端挑戰(zhàn)賽（12 月 #的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！