어떻게: 커서 추적 뷰

화면의 요소가 마우스 움직임에 반응하는 효과를 본 적이 있습니까?그것들은 자주 유사한 시차를 일으키거나 커서를 따라다니는 데 사용된다.나는 jhey.dev의 효과를 주요 곰 머리의 음영으로 사용했다.
나는 기술 명칭을 모른다.커서 추적 시차를 봅시다.
좋은 소식은 이 기술은 너무 많은 시간을 들여 제작할 필요가 없고, 당신의 디자인에 약간의 추가적인 것을 추가할 수 있다는 것이다.기억해라, 이것은 작은 세부 사항이다.
익살스런 표정을 짓자!우리는 몇몇 표기부터 시작할 것이다.

<div class="face">
  <div class="face__eyes">
    <div class="eye eye--left"></div>
    <div class="eye eye--right"></div>
  </div>
  <div class="face__mouth"></div>
</div>

우리는 이미 그것을 다 설계했다💅

Remember, you can view the compiled HTML, CSS, and JavaScript in CodePen. Use the dropdown for a source panel and press "View Compiled HTML/CSS/JavaScript".

그 얼굴이 아주 좋아요.하지만 우리가 조금만 생명을 줄 수 있다면 더 멋있을 거야.
이를 위해 CSS 변수를 "pointermove"이벤트 탐지기와 함께 사용할 수 있습니다.

document.addEventListener('pointermove', () => {
  // Make those features move by updating some CSS variables.
})

하지만 이 기능들의 이동을 제한하고 싶습니다.우리는 그들이 여기저기 마구 날게 하고 싶지 않다.우리는 미묘함을 원한다.
눈 컨테이너를 업데이트하는 CSS부터 시작하겠습니다.그게 중요해.우리는 모든 눈을 옮길 필요가 없다.역할 영역 CSS 변수는 transform에 사용됩니다.

.face__eyes {
  transform: translate(calc(var(--x, 0) * 1px), calc(var(--y, 0) * 1px));
}

calc 및 1px 값을 사용하는 방법에 주의하십시오.일부 CSS 변수를 변경하지 않는 것은 나쁜 습관이 아닙니다.이것은 우리에게 서로 다른 단원을 쉽게 바꿀 수 있는 공간을 주었다.
하지만 아직 변하지 않았다.--x와 --y의 값은 0로 떨어진다.하지만 이 시연을 통해 업데이트치가 눈에 어떻게 영향을 미치는지 볼 수 있다.
지금그 대본들은요?커서 위치를 정의된 범위에 비추고 값을 출력하는 함수가 필요합니다.

이를 위해, 우리는 맵 함수를 만들 수 있다.

const mapRange = (inputLower, inputUpper, outputLower, outputUpper) => {
  const INPUT_RANGE = inputUpper - inputLower
  const OUTPUT_RANGE = outputUpper - outputLower
  return value => outputLower + (((value - inputLower) / INPUT_RANGE) * OUTPUT_RANGE || 0)
}

우리의 매핑 함수는 입력 범위와 출력 범위를 받아들인다.그리고 함수를 되돌려줍니다. 우리는 그것을 사용하여 한 값을 다른 값에 비출 수 있습니다.
거기서 무슨 일이 일어났는지 봅시다.우리는 입력과 출력의 두 범위를 함수에 전달할 것이다.계산 범위 후에 우리는 함수를 되돌려줍니다.함수는 신기한 작용을 발휘했다.

입력 범위에 따라 입력 값의 점수를 계산한다.

에 출력 범위를 곱합니다.

출력 범위의 하한선에 추가합니다.

이 예를 고려하면 입력 범위는 0에서 100, 출력 범위는 500에서 1000, 입력 범위는 50이다.

50 => 500 + (((50 - 0) / 100) * 500))
50 => 500 + (0.5 * 500)
50 => 500 + 250
50 => 750

우리는 그것을 우리의 CSS 변수 전환과 연결시켜야 한다. 우리는 해냈다.다음은 우리가 우리의 눈을 어떻게 연결하는지 x번역입니다.

const BOUNDS = 20
const update = ({ x, y }) => {
  const POS_X = mapRange(0, window.innerWidth, -BOUNDS, BOUNDS)(x)
  EYES.style.setProperty('--x', POS_X)
}
document.addEventListener('pointermove', update)

이 정도면 됐어!
나머지는 다른 축과 기능을 연결하는 것이다.우리가 어떻게 우리가 사용하는 경계를 성명하는지 주의해라.Y축에 대해 우리는 window.innerHeight를 입력으로 사용하고 같은 절차를 따른다.
그런데 입은?이것이 바로 작용역 CSS 변수의 위력이다.
eyes 용기에 스타일을 설정하는 것보다 face 요소 자체에 스타일을 설정하는 것이 좋습니다.

const FACE = document.querySelector('.face')
const update = ({ x, y }) => {
  const POS_X = mapRange(0, window.innerWidth, -BOUNDS, BOUNDS)(x)
  const POS_Y = mapRange(0, window.innerHeight, -BOUNDS, BOUNDS)(y)
  FACE.style.setProperty('--x', POS_X)
  FACE.style.setProperty('--y', POS_Y)
}

이런 변화를 하다won't break anything.이것이 CSS 변수의 역할 영역입니다.변수 값은 여전히 눈 용기에 등급을 연결합니다.하지만 이제 입에도 통로가 생겨서 우리는 그것을 똑같이 바꿀 수 있다.시작점translateX은 다른 번역을 하기 전에 입을 가운데 놓는 데 쓰인다.

.face__mouth {
  transform: translateX(-50%) translate(calc(var(--x, 0) * 1px), calc(var(--y, 0) * 1px));
}

지금 입도 움직였어!
그러나 그것은 보기에 틀렸다.그것은 약간 불편함을 느끼는 눈과 함께 움직인다.이것은 언급할 만한 세부 사항을 중시하는 일 중의 하나다.예를 들어 만약에 우리 얼굴에 귀가 있고 눈이 위로 올라가면 귀는 어디로 갑니까?엎드려!거울로 보아라, 나는 너를 평가하지 않을 것이다.나는'디테일'을 위해 이상한 일을 한 적이 있다😅
그러면 우리는 어떻게 이 문제를 해결해야 합니까?내가 처음에 사용calc과 무단위치를 언급한 것을 기억하십니까?이제 쓸모가 생겼다.
JavaScript와 CSS는 관심사를 분리하는 방식으로 구현되었습니다.잘 됐다!JavaScript에서 커서 매핑 범위를 계산하여 CSS에 전달합니다.그것은 우리가 거기에서 무엇을 하든 상관하지 않는다.사실상'경계'는 아주 좋은 정수일 수 있다. 예를 들어100 우리는 CSS에서 우리가 하고 싶은 일을 할 수 있다.
사람의 얼굴의 각 특징은 자신의 변환을 처리한다.현재 그것들은 모두 계수1px를 사용한다.

.face__eyes {
  transform: translate(calc(var(--x, 0) * 1px), calc(var(--y, 0) * 1px));
}
.face__mouth {
  transform: translateX(-50%) translate(calc(var(--x, 0) * 1px), calc(var(--y, 0) * 1px));
}

그런데 우리가 입을 계수-1px로 바꾸면 어떨까?

.face__mouth {
  transform: translateX(-50%) translate(calc(var(--x, 0) * -1px), calc(var(--y, 0) * -1px));
}

이제 입은 눈과 반대 방향으로 움직인다.
하지만 CSS의 계수만 바꾸면 됩니다.이것은 범위가 제한된 CSS 변수를 사용하지만 그것들의 통일성을 유지하는 초능력 중의 하나이다.우리는 하나의 변수로 장면에 전기를 공급할 수 있으며, 동시에 좋은 관심사 분리를 유지할 수 있다.
CSS 변수를 사용하는 커서 추적면이 있습니다.
얼굴에 끼지만, 너는 그것만 쓸 필요가 없다.너는 그것으로 많은 일을 할 수 있다.또 다른 '괜찮은 촉감' 은 시각차 같은 아이콘 배경을 만드는 것이다.팁은 CSS 변수로 업데이트background-position하는 것입니다.
나는 이 시연에서 이런 효과를 사용했다.이것은 주요 사건이 아니다.하지만 조금만 더 넣으면 돼요.
⚠️ 이 프레젠테이션에는 오디오가 포함되어 있다⚠️
이것은 아이콘 배경의 독립된 버전입니다.비결은 당신이 좋아하는 아이콘으로 타일을 만들고 그 위에 기대는 것이다background-repeat.
이 프레젠테이션에서 계수를 설정할 수 있습니다.이것은 우리가 관심사를 분리하고 CSS가 가치를 이용하여 하고 싶은 일을 하도록 하고 있다는 사실에 근거한 것이다.

이렇게!

이것은 JavaScript와 한정된 범위의 CSS 변수를 사용하여 커서 추적 시차를 실현하는 방법입니다.나는 네가 이 기술로 무엇을 했는지 보고 매우 기뻤다.당신은 또 어떤 행동을 취할 수 있습니까?여느 때와 마찬가지로, 너는 어떻게 생각하느냐, 다음에 너를 볼 것이다.
모든 코드는 이것CodePen Collection에서 찾을 수 있습니다.
잘 유지하고 있어!ʕ •ᴥ•ʔ