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中文網其他相關文章！