我提交的前端挑战赛（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中文网其他相关文章！