userainbow（）

この記事では、個人のウェブサイトであるPotato.horseの虹の背景効果の作成について詳しく説明しています。個人的なプロジェクトを追求するために仕事から休憩を取った著者は、効果の背後にあるシンプルで効果的なJavaScriptコードについて説明します。

コアコンセプトには、ユーザーのスクロール位置をHSL（Hue、飽和、軽さ）カラーモデルの色相値にマッピングすることが含まれます。これにより、ユーザーがページコンテンツをスクロールすると、滑らかな色の遷移が作成されます。コードスニペットが提供されます：

 const userainbowbg =（）=>をエクスポートします
effect（（）=> {
  const cb =（）=> {
    const viewtheight = window.innerheight
    const contentheight = document.body.getBoundingClientRect（）。高さ
    const viewportsperrotation = math.min（
      3、
      contentheight / viewtheight
    ））
    const = 51
    Const Progress =
      window.scrolly /（viewtheight * viewportsperrotation）
    const h =（360 * Progress）％360

    document.body.style.backgroundcolor = `hsl（$ {h} deg、100％、50％）`
  }
  window.addeventlistener（ 'scroll'、cb、{passive：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 中国語 Web サイトの他の関連記事を参照してください。