조명1 [React/Next.js] 라이브러리 없이 구현하는 카드 조명 효과 라이브러리를 사용하지 않고 카드 조명 효과 구현 카드 광택을 구현하다가 원형 그라데이션으로 카드를 비추면 어떨까 라는 생각에 시도해본 카드 조명 구현하기! 어둡게 뒤덮은 레이아웃을 마우스로 비춰서 밝히는게 미묘하게 어려웠다. 내가 원하는 만큼 밝지 않거나, 마우스로 밝혀도 카드가 보이질 않거나, 선형 그라데이션 효과와 충돌나서 이상하게 동작하거나, 조명이라기보다 구멍난것처럼 보이거나... 시행착오가 참 많았다. 하루를 거의 꼬박 써서 구현하였다. 핵심 원리를 요약하자면, 마우스 위치에 따라 동적으로 css 설정: pc 뿐 아니라 다른 기기에도 사용할 수 있도록 포인트 이벤트를 사용하여 카드위에 위치한 마우스의 offset 위치를 이용하여 css로 설정한 선형 그라데이션의 위치를 backgroundPost.. 2023. 12. 31. 이전 1 다음
