这是前端挑战赛 - 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中文网其他相关文章！
