[interactive web] 3d 스크롤, resize 핸들링, 마우스 좌표

3d 스크롤

window.addEventListener("scroll", function () {
    console.log(document.body.offsetHeight - this.window.innerHeight);
  });

전체 문서 높이 - 현재 창 높이 = 전체 스크롤할 수 있는 범위

(function () {
  const houseElem = document.querySelector(".house");
  let maxScrollValue = document.body.offsetHeight - this.window.innerHeight;

  window.addEventListener("scroll", function () {
    console.log(pageYOffset / maxScrollValue);
  });
})();

스크롤한 퍼센트 구하기

---

resize 핸들링

창 크기 등을 이용한 코드를 짰을 때는 창 크기가 변화했을 때에 대한 갱신코드를 추가해주어야한다.

function resizeHandler() {
    maxScrollValue = document.body.offsetHeight - this.window.innerHeight;
  }
...
window.addEventListener("resize", resizeHandler);

---

마우스 좌표

window.addEventListener("mousemove", function (e) {
    mousePos.x = -1 + (e.clientX / window.innerWidth) * 2;
    mousePos.y = 1 - (e.clientY / window.innerHeight) * 2;
    console.log(mousePos);
  });

창의 중앙을 (0, 0)으로 했을 때 마우스의 위치 계산