[진행중] 사이트 클론 코딩 STUDY

1분코딩 - 애플 웹사이트 인터랙션 클론! 인강 정리 

 

 

1월 11일 월요일 키워드

1. 즉시 실행 함수 IIFE

2. ES6 문법 : arrow function / let, const 키워드 / 템플릿 문자열

3. load, DOMContentLoaded 차이 

4. position: sticky 

---

코드 작업 내용 

1. 각 섹션의정보를 sceneInfo 배열에 넣는다. 

const sceneInfo = [
	{
    	type: 'sticky',
        heightNum: 3,
        scrollHeight: 0,
        objs: {
        	container: document.querySelector('#scroll-section-i')
        }
    }
];

type : 'sticky' or 'normal'로 각 섹션마다 나타나는 애니메이션들을 제어한다.

heightNum : 브라우저 높이의 n배로 scrollHeight 값을 세팅한다.

scrollHeight : setLayout() 함수에서 heightNum * window.innerHeight 값으로 각 섹션의 값이 유동적으로 변동된다.

objs: 각 섹션에서 스크립트에 필요한 엘리먼트들을 넣은 객체이다.

 

2. load, resize 시에 setLayout() 함수 호출

window.addEventListener('resize', setLayout);
window.addEventListener('load', setLayout);

load 이벤트는 리소스들이 모두 로딩이 완료되면 setLayout 함수를 호출한다.

resize 이벤트는 유동적인 레이아웃인 경우 화면의 크기에 따라 각 섹션의 height 값을 변경해줘야 하기 때문에 사용한다.

 

3. 각 섹션의 높이를 지정한다.

function setLayout() {
  // 각 스크롤 섹션의 높이 세팅
  for (let i = 0; i < sceneInfo.length; i++) {
    sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight;        
    sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`     
  }
}

각 객체(sceneInfo[i].scrollheight)에 window.innerHeight 값의 3배의 높이값을 지정해준다.

(heightNum: 3 으로 innerHeight * 3 의 높이값을 가지게 된다)

 

4. 현재 스크롤에 위치한 섹션의 값을 body 에 id 값으로 전달하기

: 스크롤의 현재 위치 값과 스크롤의 현재 위치의 섹션의 위치를 찾고 body 에 현재 섹션의 위치값을 전달한다.

let yOffset = 0;    // window.pageYOffset 대신 쓸 변수
let prevScrollHeight = 0; // 현재 스크롤 위치(yOffset)보다 이전에 위치한 스크롤 섹션들의 스크롤 높이의 합
let currentScene = 0;   // 현재 활성화 된 section 의 위치(#scroll-section-i)
    
function scrollLoop() {
  prevScrollHeight = 0;

  // 스크롤이 내려온 이전의 값을 얻기 위한 코드 : prevScrollHeight
  for(let i = 0; i < currentScene; i++) {         
  	prevScrollHeight += sceneInfo[i].scrollHeight;  
  }

  if(yOffset > prevScrollHeight + sceneInfo[currentScene].scrollHeight) {        
  	currentScene++;
  }

  if(yOffset < prevScrollHeight) {
    if(currentScene === 0) return;          
    currentScene--;
  }

  document.body.setAttribute('id', `show-scene-${currentScene}`);
}

window.addEventListener('scroll', () => {
  yOffset = window.pageYOffset;
  scrollLoop();
});

4-1. scroll 이벤트가 실행되면 현재 스크롤 위치값을 찾고, scrollLoop 함수를 호출한다.

4-2. currentScene 값을 찾아서 for문을 돌린다. 현재 currentScene 값은 0 임으로 for문은 돌지 않는다.

4-3. yOffset 값이 prevScrollHeight + sceneInfo[currentScene].scrollHeight 값보다 클 경우 (한 섹션의 높이보다 클 경우) currentScene++; 의 값을 증가시킨다. => 스크롤 내릴 때 

4-4. yOffset 값이 prevScrollHeight 보다 작을 경우 currentScene--; 의 값을 감소시킨다. => 스크롤 올릴 때 

4-5. 스크롤을 올릴 때, 모바일의 경우 0보다 작은 -1이 노출 되는 경우가 있다. 

      그런 경우를 방지하고자 currentScene 이 0일 때 return 시킨다. 

4-6. 현재 스크롤의 위치로 계산된 currentScene 의 값을 템플릿리터럴을 사용하여 body 에 id 값으로 전달한다.

 

5. 처음 페이지에서 로드 되었을 때 body 에 현재 섹션 값을 읽어오지 못한다.

: 처음 로드 될 때 currentScene 의 값을 body 에 전달한다.

function setLayout() {
  // 각 스크롤 섹션의 높이 세팅
  for (let i = 0; i < sceneInfo.length; i++) {
    sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight;        
    sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`     
  }
  
  document.body.setAttribute('id', `show-scene-${currentScene}`);
}

 

6. 5번까지 코드를 진행 한 뒤, 페이지에서 스크롤을 내리고 새로고침 할 경우 해당 섹션의 위치가 어디인지 찾질 못한다.

: 스크롤 된 위치값과 현재 위치값을 찾아서 비교한 다음에 해당 섹션 위치값 찾기.

function setLayout() {
  // 각 스크롤 섹션의 높이 세팅
  for (let i = 0; i < sceneInfo.length; i++) {
    sceneInfo[i].scrollHeight = sceneInfo[i].heightNum * window.innerHeight;        
    sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`     
  }
  
  yOffset = window.scrollYOffset;
  let totalScrollheight = 0;
  for (let i = 0; i < sceneInfo.length; i++) {
    totalScrollheight += sceneInfo[i].scrollHeight;
    if(totalScrollheight >= yOffset) {
      console.log(yOffset);
      currentScene = i;
      break;
  	}
  }
  
  document.body.setAttribute('id', `show-scene-${currentScene}`);
}

 

변수 totalScrollheight 는 sceneInfo[i].scrollHeight 높이값만큼 플러스 되고,

currentScene 에 i 를 할당한다.

totalScrollheight 값이 현재 스크롤 위치보다 크거나 같을 경우 for 문이 break 된다. 

해당 currentScene 값을 body id 값으로 속성값을 설정하면, 페이지 중간에서 새로고침해도 해당 섹션의 위치 값을 찾을 수가 있다.

 

 

...

계속 진행중입니다.