레인보우() 사용

반응형

저는 일을 잠시 쉬고 작은 개인 프로젝트를 시작했습니다. 그 작은 프로젝트 중 하나가 감자입니다.낙서, 단편 영상, 농담 등을 보관하는 말 이것 좀 봐!

하지만 이 게시물은 제가 일을 쉬고 있거나 다른 실험이나 현장 자체에 대한 것이 아닙니다. 사람들은 내가 디자인에서 사용한 한 가지 특별한 기술을 좋아하는 것 같은데, 특히 사용자가 콘텐츠를 탐색할 때 색상으로 전환되는 배경 효과입니다.

일부는 이러한 효과가 어떻게 구현되었는지를 물었습니다(최소화된 코드를 읽는 것까지 포함).

자, 간단히 요점을 말씀드리자면, 몇 가지 맥락이 있습니다.

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)
})

 

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)
})

간단히 말해서, HSL 색상 표기법에서 스크롤 위치를 색조에 매핑합니다. 이걸 분해해 봅시다.

색상 모델

CSS에서 색상을 기술하는 방법에는 여러 가지가 있는데, 가장 일반적인 두 가지는 RGB(왼쪽)와 HSL(오른쪽)이다.

 

 

RGB는 부가적인 색상 팔레트입니다. 즉, 빨간색, 녹색, 파란색을 100% 섞으면 흰색이 나오고, 빨간색과 녹색이 100% 섞이면 노란색이 나오지만 파란색은 0%이면 노란색이 나온다. 이는 예를 들어 오일 페인트 또는 CMYK 컬러 모델을 사용하는 경우와 다릅니다. 색조는 검은색(-ish)1입니다.

코드로 설명하는 것이 쉽기 때문에 이러한 접근 방식에 익숙하지만 색조, 채도 및 광도 측면에서 색상을 지정하는 것은 특히 디자인 배경에서 왔거나 사람이 사용하는 언어인 경우 더욱 자연스러운 것으로 보입니다.

우리는 개발자로서 RGB에 익숙해졌지만, 구어에서는 RGB를 사용하는 것이 부자연스럽고 혼란스러울 것입니다. 파사드는 RGB로 사용하기 매우 어려울 것입니다.

반면에 HSL은 종종 훨씬 더 직관적으로 작업할 수 있다. 예를 들어, 조금 더 차가운 색을 만들고 싶다면, 색조 슬라이더를 파란색 쪽으로 조금 움직이면 되고, 내가 생각하는 것에 더 가까워져야 합니다. RGB의 경우 파란색을 더 많이 넣어서 색을 더 차갑게 보이게 하면 파란색 성분이 전체적인 밝기에 기여하기 때문에 결과 톤이 조금 더 밝아질 것입니다. 이것은 당신이 보상하기 위해 빨간색과 초록색 값을 낮춰야 한다는 것을 의미합니다.

실제로 어떻게 작동하는지 보려면 아래 예에서 파란색을 최대값으로 표시해 보십시오.

 

 

첫 번째로 눈에 띄는 점은 모든 톤이 파란색으로 바뀌고 전체적인 사진의 밝기가 높아진다는 점이다. 우리가 논의하고 있는 효과의 경우, 그것은 바람직하지 않을 것입니다.

이제 HSL 색상 원에 대해서도 똑같이 해보자. 슬라이더를 왼쪽으로 약 90도 끕니다.

 

이 시나리오에서 HSL을 사용하면 수잔이 흡혈귀가 될 뿐만 아니라 비슷한 수준의 밝기를 유지할 수 있다. 그게 바로 내가 찾던 거야

 

그래서, 내가 말하고자 하는 바는:

어떻게 하는 거죠? 간단히 말해서, HSL 색상 표기법에서 스크롤 위치를 색조에 매핑합니다. 라팔, 이틀 전에

…스크롤 이벤트를 감지할 때마다 색조 원의 각도로 매핑하려고 합니다.

 

I didn’t want to start with red as it would make me hungry and the base yellow fits the design a bit better, so I applied a small initial shift—hence `const from = 51` set as the initial offset.

 

기본적인 구현은 여기까지입니다!

자, 세 가지 다른 개선 영역이 있습니다.

레인보우 성능 사용

스크롤마다 다시 페인트를 칠하고 있어서 오래된 모바일 기기나 4k 화면에 연결된 일부 하이엔드 노트북이 60fps의 견고한 상태를 유지하지 못할까 봐 걱정했습니다. 하지만 저는 지금까지의 결과에 만족합니다. 수동적인 이벤트 청취자를 사용하는 것은 특히 모바일에서 약간의 힘을 주었습니다.

성능이 문제라는 것을 알게 되면, 특히 더 많은 컨텐츠를 사용할 때 다음을 중점적으로 다룰 것입니다.

 

• 모든 스크롤 핸들러 호출에서 getBoundingClientRect에 대한 불필요한 호출을 제거합니다.
• Request AnimationFrame을 사용하여 배경색 변경을 연기하거나 조절합니다.

첫 번째 개선은 어느 정도 영향이 있을 것으로 예상하지만, 두 번째 개선의 혜택은 미미할 것입니다.

최적화하기 전에 측정하십시오. 성능에 집착하는 것은 프레임의 감소나 배터리 충격으로 인해 문제가 눈에 띄게 될 때에만 가능합니다. iPhone Pro는 많은 보급형 노트북보다 컴퓨팅 성능이 뛰어나므로 이러한 장치에서도 테스트해 보는 것이 좋습니다. 만약 당신이 약간의 돈을 할애할 수 있다면, 그런 목적을 위해 형편없는 오래된 안드로이드 폰을 갖는 것은 좋다.

지각적으로 균일한 색 공간

이전 그림에서 일부 완전히 포화된 색상이 다른 색상보다 더 어두워 보인다는 것을 눈치 챘을지도 모릅니다. 코딩할 때 우리가 주로 사용하는 색 공간은 사람의 눈이 작용하는 방식을 반영하지 못하기 때문이다. 깊이 있는 설명은 저보다 경험이 많은 사람에게 맡기겠지만, 같은 양의 빨간색/녹색/노란색이 파란색보다 더 밝게 나타날 것이라고 (지나친 단순화 경고!) 충분히 말할 수 있습니다. 이것은 어떤 경우에는 페이지의 텍스트를 읽기 더 어렵다는 것을 의미합니다.

 

 

For now, this isn’t an issue as I’ve just put this thing online and titles serve a secondary purpose. But there’s a solution to the problem and it’s not overly complicated: use a perceptually uniform color space. There’s a bunch of libraries that do it out of the box, both in JavaScript/TypeScript and CSS/Sass/`<pick your CSS flavor here>`. `hsluv` seems like a good starting point.

접근성

Note that I’ll be focusing on the visual effect itself and not discussing the rest of the site (e.g. alt tags, document structure, etc…). I’d like to focus on contrast, color blindness and people who rely on `prefers-reduced-motion`. The site is a living document; there’s always so much to improve. For instance, contrast can be an issue in a few, non-critical places. I’m happy to accept feedback and implement it: hit me up!.

색맹

 

색맹인 분들에게는 그 효과가 사이트를 완전히 망가뜨리지 않도록 하고 싶었습니다. 그래서 저는 가장 흔한 유형: 중수체성 및 원형색소성(적녹색맹)에 초점을 맞췄지만, 더 넓은 테스트도 수행했습니다. 나는 기초 점검을 위해 포토샵과 컬러블라인드(크롬 확장)를 사용했어요.

- -동작-모션

'기본 설정 축소 모션' CSS 미디어 기능은 사용자가 시스템에서 사용하는 비필수 모션의 양을 최소화하도록 요청했는지 여부를 감지하는 데 사용됩니다.
—MDN

This site doesn’t contain many animations (besides the Little Sausage Angels you’ll see if you hit “Share”), but I was wondering if people who rely on `prefers-reduced-motion` would like the background color to stay constant.

간단한 대답은 "잘 모르겠다" 입니다. 저의 직관은 회전하는 색이 실제로 모션의 자격이 없다는 것입니다. 하지만 이 문제에 대한 저의 경험과 이해는 최소한으로 제한적입니다. 이런 상황에서는 추측보다는 사용자 조사에 의존할 것입니다.

 

운 좋게도, 레딧은 5분 동안 유명세를 탔고, 이것은 피드백을 수집할 수 있는 좋은 기회임이 증명되었다. 지금까지 이용자들 중 누구도 배경효과에 대해 문제를 제기하지 않았습니다. 산드리나 페레이라 같은 접근성 전문가들을 알게 된 것도 행운입니다. 그녀의 제안은 (a) 배경 애니메이션은 확실히 모션으로 적합하며, (b) 사용자 상호 작용의 직접적인 결과이기 때문에 효과가 자연스럽게 느껴질 수 있다는 것이었다.

요약

90년대 후반 지오시티스 웹은 장난스럽고 이상하게 느껴졌다. 방해받지 않고 다소 성과가 떨어지는 방식으로 재미있었다. 저는 이러한 외관과 느낌을 현장에 반영하고 싶었습니다. 하지만 여전히, 저는 힙스터돔 레벨을 9000으로 올리고 넷스케이프 7을 통해 독점적으로 검색해야 할 정도로 난해하게 느끼도록 만들고 싶지 않았습니다. 새로운 Nirvana Unplugged 앨범을 들으면서요.

나는 여전히 모바일과 데스크탑에 괜찮은 UX와 부활절 달걀을 담을 수 있는 공간(우리가 그렇게 익숙해진 소셜미디어와의 이상하고 욕설적인 관계 속에서 살 때 할 수 없는 일)을 원했다.

어렸을 때, 저는 인터넷에 처음 접속하기도 전에 6개의 웹사이트를 만들었습니다. 3년 동안 고단했던 지금은 이직을 고려하더라도 진정으로 코딩을 즐긴 것은 그때가 처음이었다. 얼마나 재미있었는지 잊고 있었어!

 

자, 나가서 고양이를 쓰다듬고 물건을 만들어 보세요!

추신: 카메론의 세계를 확인해 보세요.

P.P.S. 대화형 다이어그램 코드는 GitHub에서 확인할 수 있습니다.

각주

• 따라서 CMYK의 K 성분은 "검은색"을 의미한다. B를 사용하는 것은 다른 컬러 모델에서는 "파란색"을 의미하기 때문에 헷갈릴 수 있습니다. ⮑
• RGB/HSL을 사용하여 설명하는 것과 지각 색 공간이 달라서 완벽하지 않습니다. »