userAinbow ()

이 기사는 개인 웹 사이트 인 Potato.horse의 무지개 배경 효과의 생성에 대해 자세히 설명합니다. 개인 프로젝트를 추구하기 위해 직장에서 휴식을 취한 저자는 효과 뒤에 간단하면서도 효과적인 JavaScript 코드를 설명합니다.

핵심 개념은 HSL (Hue, Pathation, Lightness) 컬러 모델에서 사용자의 스크롤 위치를 색조 값에 매핑하는 것입니다. 사용자가 페이지 컨텐츠를 스크롤함에 따라 매끄러운 색상 전환이 발생합니다. 코드 스 니펫이 제공됩니다.

 const userainbowbg = () => 내보내기
useeffect (() => {
  const cb = () => {
    const viewportheight = window.innerheight
    const contentheight = document.body.getBoundingClientRect (). 높이
    const viewportsperrotation = math.min (
      3,
      Contentheight / Viewportheight
    ))
    Const From = 51
    const progress =
      Window.scrolly / (Viewportheight * ViewportSperrotation)
    const h = (360 * 진행) % 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!