인터랙티브웹 (3) 썸네일형 리스트형 <자바스크립트 기초> 18. 스크롤 이벤트 (2) * 지속적인 스크롤 이벤트 - 스크롤이 움직일 때마다 캐릭터가 움직이고 스크롤이 멈추면 캐릭터도 멈추는 이벤트를 만든다고 가정하자. - 이 때 스크롤 때마다 빈번히 일어나는 작업은 자칫하면 메모리를 엄청나게 잡아먹을 수 있다. 즉 스크롤이 움직일때마다 if문이 실행되고 멈추면 다른 if문이 실행되고, 계속 스크롤의 움직임을 확인한다든지 여러 경우가 있다. - 우리는 효율적인 작업을 위해 Timeout을 사용할 것이다. - 상태를 나타내기위해 scrollState라는 변수에 미리 false값을 담아두었다. 멈춘 것을 false로 표현하기 위함이다. - 캐릭터가 움직이는 것은 'moving'이라는 클래스를 추가하여 실행할 것이고, 스크롤이 멈추면 'moving'클래스를 제거하여 캐릭터를 멈출 것이다. Cha.. <자바스크립트 기초> 17. 마우스 이벤트 * 마우스 이동 이벤트 - CSS로 3D 처리된 공간을 좀 더 인터랙티브하게 보이기위해 마우스의 이동에 따라 각도가 조금씩 변하게 만들어보자. 즉 다음 그림과 같이 만들어볼 것이다. - 위와 같은 처리를 위해 다음과 같이 생각할 수 있다. ① 이벤트 리스너에 mousemove 를 사용한다. ② 이벤트 리스너에 함수를 넣고 거기에 객체를 통해 .clientX 와 .clientY 로 마우스의 좌표 값을 가져온다. ③ 마우스의 좌표를 적당하게 사용하기 위해 끝에서 끝까지를 -1에서 +1까지 숫자로 나타내어 사용할 것이다. 이는 창의 전체에서 좌표의 비율을 사용하면 가능할 것이다. ④ 3D가 적용된 공간의 스타일객체에 transform 속성에 rotateX와 rotateY를 입력한다. - 위를 코드로 나타내어 .. <자바스크립트 기초> 16. 타이밍 다루기 1. setTimeout * 지연 - setTimeout 은 타이밍을 원하는 만큼 지연시키는 역할을 수행한다. setTimeout(F, 1000); - setTimeout(function, ms); 과 같이 사용한다. 이 때 함수자리에는 미리 선언해둔 함수가 들어갈 수 있고, 두번째 매개변수는 지연시킬 시간을 ms단위로 기재한다. * 취소 - 앞서 봤던 지연을 변수에 넣을 수도 있다. let timeId; timeId = setTimeout(F, 1000); clearTimeout(timeId); - 변수 = setTimeout(function, ms); 이라고 선언하여 작동시킬 수 있으며, 이 때 clearTimeout(변수) 를 이용하면 셋타임을 완전히 클리어시켜서 함수자체가 실행이 안되도록 할 수 .. 이전 1 다음
