Userainbow（）

本文详细介绍了个人网站Potath.Horse的彩虹背景效果的创建。作者休假以从事个人项目，他解释了效果背后的简单而有效的JavaScript代码。

核心概念涉及将用户的滚动位置映射到HSL（色调，饱和度，轻度）颜色模型中的色相值。当用户浏览页面内容时，这会产生光滑的颜色过渡。提供了代码段：

导出const userainbowbg =（）=>
useeffect（（）=> {
  const cb =（）=> {
    const viewportheight = window.innerheight
    const contentHeight = document.body.getBoundingCletRect（）。高度
    const viewportsperrotation = math.min（
      3，
      contentheight / viewPotheight
    ）
    const来自= 51
    const进度=
      window.scrolly /（viewPortheight * viewportsperrotation）
    const H =（来自360 *进度）％360

    document.body.style.backgroundColor =`hsl（$ {h} ver，100％，50％）
  }
  window.addeventlistener（'scroll'，cb，{vassive：true}）
  return（）=> window.removeeventlistener（'scroll'，cb）
}））

作者将HSL模型与RGB进行了对比，突出了HSL的直观性质，以调节色彩温度和亮度。他们解释了HSL在改变色调的同时选择一致的亮度的选择，这是所需效果的关键方面。最初的色调偏移（ const from = 51 ）被解释为一种风格选择。

讨论了潜在的性能改进，包括避免使用冗余的getBoundingClientRect调用，并使用requestAnimationFrame进行节流。但是，作者强调了在优化之前测量性能的重要性。

该文章还解决了HSL非敏感统一性的局限性，并承认某些完全饱和的颜色可能比其他颜色更暗。作者计划在将来的迭代中使用像HSLUV一样的均匀颜色空间来解决此问题。

提到了可访问性考虑因素，重点是色盲和prefers-reduced-motion媒体查询。虽然初始测试没有任何问题，但作者承认可以将背景动画视为运动并计划进一步的用户研究的可能性。

作者结束时回顾了设计的怀旧灵感，旨在实现有趣而功能的用户体验。他们还提到了一段时间的倦怠后编码项目时遇到的乐趣。

脚注

1. CMYK中的“ K”代表黑色，以避免与其他颜色模型中代表蓝色的“ B”混淆。
2. 由于感知颜色空间和RGB/HSL表示之间的差异，亮度并不完全一致。

以上是Userainbow（）的详细内容。更多信息请关注PHP中文网其他相关文章！