useRainbow()

This article details the creation of a rainbow background effect for a personal website, potato.horse. The author, who took a break from work to pursue personal projects, explains the simple yet effective JavaScript code behind the effect.

The core concept involves mapping the user's scroll position to the hue value in the HSL (Hue, Saturation, Lightness) color model. This creates a smooth color transition as the user scrolls through the page content. The code snippet is provided:

export const useRainbowBg = () =>
useEffect(() => {
  const cb = () => {
    const viewportHeight = window.innerHeight
    const contentHeight = document.body.getBoundingClientRect().height
    const viewportsPerRotation = Math.min(
      3,
      contentHeight / viewportHeight
    )
    const from = 51
    const progress =
      window.scrollY / (viewportHeight * viewportsPerRotation)
    const h = (from   360 * progress) % 360

    document.body.style.backgroundColor = `hsl(${h}deg, 100%, 50%)`
  }
  window.addEventListener('scroll', cb, { passive: true })
  return () => window.removeEventListener('scroll', cb)
})

The author contrasts the HSL model with RGB, highlighting HSL's intuitive nature for adjusting color temperature and brightness. They explain the choice of HSL for maintaining consistent brightness while changing hue, a key aspect of the desired effect. The initial hue offset (const from = 51) is explained as a stylistic choice.

Potential performance improvements are discussed, including avoiding redundant getBoundingClientRect calls and using requestAnimationFrame for throttling. However, the author emphasizes the importance of measuring performance before optimization.

The article also addresses the limitations of HSL's non-perceptually uniform nature, acknowledging that some fully saturated colors may appear darker than others. The author plans to address this using a perceptually uniform color space like hsluv in future iterations.

Accessibility considerations are mentioned, focusing on color blindness and the prefers-reduced-motion media query. While initial testing showed no issues, the author acknowledges the possibility that the background animation might be considered motion and plans further user research.

The author concludes by reflecting on the nostalgic inspiration for the design, aiming for a playful yet functional user experience. They also mention the fun they experienced while coding the project after a period of burnout.

Footnotes

1. The 'K' in CMYK stands for black, to avoid confusion with 'B' representing blue in other color models.
2. Brightness is not perfectly consistent due to the differences between perceptual color space and RGB/HSL representations.

The above is the detailed content of useRainbow(). For more information, please follow other related articles on the PHP Chinese website!