• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    해결됨

z축 스크롤 이벤트 관련해서 몇 가지 질문드립니다.

20.10.10 15:23 작성 조회수 164

0

선생님!

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

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

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와 별개로 스크롤 수치가 얼마가 되면 이미지가 생겼다 사라진다.' 이런식으로 접근해서 생각하면 될까요?) 어떤게 가능하고 어떤게 불가능한지 아직 정확히 판단할 수 있는 수준이되지 않아서 이 구조 혹은 진행방식(?)을 어떻게 이해하면 되는지 궁금합니다.

답변 1

답변을 작성해보세요.

0

1. 기본적으로 스크롤을 이용한 동작이므로, 스크롤 위치를 바꾸어주면 나머지는 알아서 맞춰진다고 생각하시면 됩니다. 만약 애니메이션이 필요하다면 스크롤의 움직임 자체를 애니메이션 처리해주시면 되는데, 제일 쉬운 방법으로는 jquery를 이용한 것이 있습니다.
구글에서 검색해서 처음 나온 링크를 올려봅니다 https://superkts.com/jquery/@scroll

2. 머릿 속에 제가 종이로 만들었던 구조를 떠올리시면 될 것 같아요. 각 wall들을 이동시킬 수도 있고, 말씀대로 안에있는 요소들을 이동시킬 수도 있고요. 정답이 있는 것은 아니고, 구조나 형태에 따라 더 효율적인 방법을 선택하시면 될 것 같습니다. CSS에 정답이 있는 것은 아니라서요~

3. 스크롤이 진행되면 진행된만큼 폭이 늘어나는 progress-bar에서 이용하는 pageYOffset 비율을 이용하시면 됩니다.

const scrollPer = pageYOffset / maxScrollValue;

소스에 있는 이 부분이 바로
전체 스크롤 범위에 대한 현재 스크롤 위치 비율이므로,
예를들어 이 비율이 0.3이상이면 고정된(css position fixed로 위치 고정) 뭔가가 나타난다든지 하는 식으로 해주시면 되겠지요^^
(참고로, 이런 방식의 인터랙션을 아주 깊게 파고드는 강의가 애플 인터랙션 클론 강의랍니다)