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

我建造了什么

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

演示

源代碼可在 https://github.com/plutium-239/dev.to-frontend-challenge 公開獲取

旅行

主題/CSS

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

選擇配色方案是一個(gè)有趣的巧合。我看過一張 tumblr 帖子/模因的屏幕截圖，非常喜歡其中的顏色。我確實(shí)通過谷歌鏡頭搜索了更高分辨率的圖像并提取了它的顏色。這為我提供了 3 種基色（表面色、原色、活性色）。對(duì)于其他顏色，我希望其中一種是紅粉色，另一種是綠色/綠松石色。我選擇了這個(gè)范圍內(nèi)的一些顏色并匹配了陰影，使其與當(dāng)前的調(diào)色板保持一致。我了解了 Colormind 等很棒的工具來嘗試替代調(diào)色板。

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

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

內(nèi)容/HTML（通過JS）/CSS

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

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

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

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

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

結(jié)論

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

所以，當(dāng)我看到挑戰(zhàn)帖子時(shí)，我覺得這很有趣，但我不認(rèn)為我會(huì)太認(rèn)真地對(duì)待它。然而，我碰巧看到了上面提到的屏幕截圖，以及一個(gè)使用舊的 keywords.js 效果的網(wǎng)站，而這兩者一定在某個(gè)時(shí)刻點(diǎn)擊過。這就是圣誕奇跡！ ？

我心里并沒有任何未來的計(jì)劃，我覺得我做了我計(jì)劃做的事情，甚至更多。

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

該代碼可在 MIT 許可證下使用。

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

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