COMPMOS COMPMOS

Javascript/실습

• [ JS ] Layered illust

  Javascript/실습 2023. 3. 1. 19:25

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

  Read More
• [ JS ] Pixel animaiton

  Javascript/실습 2023. 3. 1. 00:33

  css grid를 이용해 요소에 애니메이션을 적용해 보았습니다. 특정 요소를 클래스의 인자로 전달함으로써 해당 요소에 그리드가 씌워지고 각 아이템에 움직임을 줌으로써 요소가 사라지는 효과, 웨이브, 무너지는 효과를 구현했습니다. 각 애니메이션은 클릭과 함께 시작됩니다. See the Pen pixel_animation by OnnJE (@ogtitle) on CodePen.

  Read More
• [ JS / Canvas ] 비 내리는 효과 - rain effect

  Javascript/실습 2023. 2. 19. 17:53

  이번에 만든 것은 canvas를 통해 구현한 비 내리는 효과입니다. 클래스를 통해 구현했으며, 총 두 가지 느낌을 표현해봤습니다. 인스턴스 생성 시 총 세 가지의 인자(효과를 입힐 대상 요소, 빗줄기 수, 빗줄기의 속도)를 받도록 했으며 이 중 빗줄기 수와 빗줄기의 속도는 디폴트값을 주어 필요시 조절하도록 했습니다. See the Pen rainEffect by OnnJE (@ogtitle) on CodePen. 1. Constructor constructor(target, intensity = 5, speed = 5) { //add canvas that same size as target element this.target = target; this.targetStyle = getComputedStyl..

  Read More