인프런 커뮤니티 질문&답변

선생님!

강의를 들으며 작업해보고 있는데요

아직 많이 미흡해서 질의하는 내용 자체가 부족하지만, 나름대로 구글링도 해보고 찾아보다가 잘 모르겠어서 질문 남겨봅니다...!

1. z축 스크롤이 다 진행되면 2-3초 뒤 자동으로 맨 앞 페이지로 돌아가는 코드를 추가하고 싶은 경우에는 자바스크립트에 썼던 코드 중 어느걸 사용해야할까요? 다른 질문글을 보니 setTimeout, scroll to를 쓰는 것 같은데, 강의에서 알려주신 기존 코드에서 어떤 수치를 이용해야하는지 잘 모르겠습니다. 느낌상 아래 코드에 추가되어야할 것 같아 구글링하며 맞아보이는걸 적용해봤는데 오히려 기존에 실행되던 것들까지 오류가 떠버리더라구요. 어떤식으로 접근해야할지 궁금합니다.

window.addEventListener('scroll', function () {

    const scrollPer = pageYOffset / maxScrollValue;

    const zMove = scrollPer * 3000 - 3000;

    houseElem.style.transform = 'translateZ(' + zMove + 'vw)';

    barElem.style.width = scrollPer * 100 + '%';

  });

2. 강의에서 z축에 차례로 놓이는 wall들을 css파일에서 

.wall {position: absolute;}를 통해 포개주었는데,

이 때 wall들의 x,y 값을 바꿔서 화면에서 보이는 상하좌우 위치도 변경해줄 수 있나요? 아니면 wall은 그대로고, 그 안에 있는 텍스트나 넣어줄 이미지들의 위치를 조정해줘야하나요?

3. 이 스크롤 이벤트를 가지고 업그레이드 시켜서 이런저런 기능을 추가해서 연습해볼 수 있으면 좋을 것 같아 질문합니다.

z축 스크롤을 하게 되면, 보여지는 이미지가 멀리 있어서 작았다가 스크롤해서 가까워질 수록 커집니다. 이렇게 '스크롤 하는 중간에, z축 스크롤에 영향받지 않는 이미지를 몇 초간 추가한다.' 이런 것도 이론적으로 가능한가요? (예를 들어 '움직이는 house와 별개로 스크롤 수치가 얼마가 되면 이미지가 생겼다 사라진다.' 이런식으로 접근해서 생각하면 될까요?) 어떤게 가능하고 어떤게 불가능한지 아직 정확히 판단할 수 있는 수준이되지 않아서 이 구조 혹은 진행방식(?)을 어떻게 이해하면 되는지 궁금합니다.