Vanilla JS 및 CSS의 Steam과 같은 카드 상호 작용

Steam 트레이딩 카드는 게임 플레이 중에 무작위로 수집할 수 있는 카드입니다. 플레이어가 카드를 다른 사람과 교환(또는 구매)해야 하기 때문에 모든 카드를 수집하는 것은 즐거운 일이 아니지만 게임 페이지에서 카드와 상호 작용하는 것은 흥미로울 수 있습니다.



나는 약간의 조정으로 비슷한 상호 작용을 만들었습니다.



트레이딩 카드의 네 부분(크기, 원근감, 필터 및 그림자)이 변경됩니다.

관점

효과를 재현하려면 강력한CSS 3D transform 기능이 수반되어야 합니다. 카드의 동적 관점은 호버링 및 이동 동작을 의미합니다.

CSS에서 perspective 또는 transform: perspective() 을 사용하여 HTML 요소에 대해 3D 모드를 활성화하는 두 가지 방법이 있습니다. 전자는 하위 요소에 대한 3D 공간을 생성하는 상위 요소에 의해 사용되는 반면, 후자는 단일 요소에 대한 것입니다. David DeSandroa great series가 CSS 3D에 대해 설명했습니다. 자세히 알아보려면 가서 확인하세요.

transform: perspective(400px) rotateY(45deg)

perspective: 400px

회전

이름에서 알 수 있듯이 rotateX() , rotateY() 및 rotateZ() 는 3D 공간에서 요소를 회전하는 데 사용할 수 있습니다. 원근법이 활성화되지 않은 경우 회전 기능은 평행 투영만 수행하며 이는 우리가 원하는 경우가 아닙니다.



회전 각도는 커서 위치에 비례하여 조정되며 mousemove 커서의 핫스팟이 내부에 있는 동안 마우스를 움직일 때 요소에서 실행되는 이벤트가 이를 감지하는 이벤트입니다. 요소에서 커서가 움직이는 순간을 나타내는 mouseenter 과는 다릅니다.

card.addEventListener("mousemove", function (event) {
  card.style.transform = `perspective(1000px)
  rotateY(${rotate(event.x, centerX)}deg)
  rotateX(${-rotate(event.y, centerY)}deg)`;
})

회전 각도는 커서와 카드 중심의 상대 위치로 계산할 수 있습니다. 큰 회전 각도를 피하기 위해 여기에서 임계값이 필요합니다. 이 경우 카드가 매우 얇아지고 위에서 마우스를 가져가는 것이 불가능할 수 있습니다.

function rotate(cursorPosition, centerPosition, threshold = 20) {
  if (cursorPosition - centerPosition >= 0) {
    return (cursorPosition - centerPosition) >= threshold ? threshold : (cursorPosition - centerPosition);
  } else {
    return (cursorPosition - centerPosition) <= -threshold ? -threshold : (cursorPosition - centerPosition);
  }
}

명도

카드를 위아래로 슬라이드하면 반사 효과의 변화를 알 수 있습니다. 이것은 일종의 그라디언트 색상 오버레이 효과가 아니라 brightness 필터입니다.

function brightness(cursorPositionY, centerPositionY, strength = 50) {
  return 1 - rotate(cursorPositionY, centerPositionY)/strength;
}
// ...
card.style.filter = `brightness(${brightness(event.y, centerY)})`;

그림자

그림자는 이 상호 작용의 핵심 부분이며 커서의 반대 방향을 향합니다. 스팀처럼 여기에 큰blur-radius을 적용했습니다.

card.style.boxShadow = `${-rotate(event.x, centerX)}px ${-rotate(event.y, centerY)}px 80px 0px rgba(48, 65, 0, 0.5)`;

모든 것이 매끄럽게 느껴지도록 CSS에 transition를 추가하십시오.

#card {
    transition: .2s;
}

모든 작업이 완료되면 커서가 해당 영역을 떠난 후 카드가 초기 모양으로 복원되는지 확인하십시오.

card.addEventListener("mouseleave", function (event) {
  card.style.transform = `perspective(500px)`;
  card.style.width = `120px`;
  card.style.height = `160px`;
  card.style.filter = `brightness(1)`;
  card.style.boxShadow = `0 0 0 0 rgba(48, 65, 0, 0.5)`;
})

읽어주셔서 감사합니다. 아래에서 결과를 볼 수 있습니다.

소스 코드: https://github.com/imchell/steam-like-card-curation

미리보기(데스크톱 브라우저로 열기): https://steam-like-card-curation.vercel.app/