반응형
js rain effect
-
[ JS ] Layered illustJavascript/실습 2023. 3. 1. 19:25
layered illust는 '마우스와 상호작용하는 이미지를 만들어 볼까?'라는 생각이 들어 만들게 되었습니다. 요소에 적용된 동작은 마우스 오버에 따른 회전, 마우스 아웃에 따른 바운스 효과, 캔버스를 통한 비 내리는 효과 등이 있습니다. See the Pen illust_layered by OnnJE (@ogtitle) on CodePen. 목표로한 동작은 요소가 마우스를 바라보는 방향으로 3차원 회전을 하는 것입니다. 이러한 3D Rotation을 구현하기 위해서 생각한 방법은 요소 앞에 그리드 패널을 씌워 마우스의 위치를 특정하고 각 그리드에 대응하는 변환을 적용하는 것입니다. 따라서, 그리드 패널을 가운데 그리드가 (0, 0)인 좌표 평면으로 취급하여, 각 그리드에 마우스 오버 이벤트를 추가해 ..