[ 애플 웹사이트 클론 ] 스크롤 섹션 높이 세팅하기

각 div태그에 스크롤높이값을 일정하게 지정해주어, 스크롤애니메이션을 구현해야한다.

 

 

 

 

• 그러기 위해서는 가장 먼저, 스크롤 섹션을 태그에 아이디값으로 지정해주고
• 창 크기가 변할 때마다, 달라지는 스크롤높이들을 스크롤섹션에 적용해주어야한다.

 

 

 

 

 

첫 번째로, 아래와 같이 스크롤섹션이라는 아이디값을 통해 섹션을 나누어 준다.

 <section class="scroll-section" id="scroll-section-0">
        <h1>AirMug Pro</h1>
        <div class="sticky-elem main-message">
          <p>온전히 빠져들게 하는 <br />세라믹</p>
        </div>
        <div class="sticky-elem main-message">
          <p>주변 맛을 느끼게 해주는<br />주변 맛 허용 모드</p>
        </div>
        <div class="sticky-elem main-message">
          <p>온종일 편안한<br />맞춤형 손잡이</p>
        </div>
        <div class="sticky-elem main-message">
          <p>새롭게 입가를 <br />찾아온 매혹</p>
        </div>
      </section>

 

 

두 번째로, 다음과 같은 배열로 스크롤섹션들을 관리해주자.

여기서 querySelector를 통해, DOM요소에 접근하여 각 스크롤섹션태그들을 불러왔다.

  const sceneInfo = [
    {
      //0
      type: "sticky",
      hieghtNum: 5, // 브라우저 높이의 5배로 scrollHeight세팅
      scrollHeight: 0,
      objs: {
        container: document.querySelector("#scroll-section-0"),
      },
    },
    {
      //1
      tyoe: "normal",
      hieghtNum: 5,
      scrollHeight: 0,
      objs: {
        container: document.querySelector("#scroll-section-1"),
      },
    },
    {
      //2
      type: "sticky",
      hieghtNum: 5,
      scrollHeight: 0,
      objs: {
        container: document.querySelector("#scroll-section-2"),
      },
    },
    {
      //3
      type: "sticky",
      hieghtNum: 5,
      scrollHeight: 0,
      objs: {
        container: document.querySelector("#scroll-section-3"),
      },
    },
  ];

 

 

 

마지막으로, 스크롤 섹션의 높이를 윈도우 창크기가 변할때마다 설정해주도록 함수를 실행해준다.

  function setLayout() {
    //각 스크롤 섹션의 높이 세팅
    for (let i = 0; i < sceneInfo.length; i++) {
    
    //섹션의 스크롤 높이는 heightNum에 윈도우창안쪽높이를 곱한값
      sceneInfo[i].scrollHeight = sceneInfo[i].hieghtNum * window.innerHeight;
      
    //DOM요소에 접근하여, style의 height값을 위의 높이로 다시 설정해준다.  
      sceneInfo[i].objs.container.style.height = `${sceneInfo[i].scrollHeight}px`;
    }
    console.log(sceneInfo);
  }
  

  window.addEventListener("resize", setLayout);

 

 

 

window의 resize이벤트핸들러를 통해, 창크기가 변할 때 마다 함수를 실행시키면

창크기가 변할때마다, 스크롤섹션들의 높이를 지정할 수 있다.

 

 

 

scrollHeight값 지정하기

 

 

 

 

 

 

 

---

리액트쓰다가, 자바스크립트 쌩으로 코드쓰려니까 너무 어색하다

스크롤애니메이션만 제대로 활용해도 멋있는 웹사이트를 만들 수 있을 것 같다.