[jQuery - 실습] Changing element position with Scroll

테크야끼·2021년 5월 21일

jQuery

목록 보기

10/11

💡 학습목표

스크롤을 트리거로 요소의 좌표를 특정 구간동안 제어하는 로직을 통해 window.scrollY, .offset() 등 요소의 좌표를 반환하거나 제어하는 메서드를 심화학습한다.

HTML

  <body>
    <div class="container">
      <div class="bg"></div>
      <i class="far fa-angry smile"></i>
    </div>
  </body>

CSS

      body {
        height: 1200px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .container {
        width: 500px;
        height: 500px;
        display: flex;
        align-items: center;
      }

      div {
        width: 300px;
        height: 300px;
        position: absolute;
      }

      i {
        font-size: 200px;
        line-height: 300px;
        position: relative;
      }

      .bg {
        width: 193px;
        height: 200px;
        background: yellow;
        border-radius: 50%;
        position: absolute;
        left: 200px;
      }

JavaScript

$(function () {
  //changing charactors position

  //1. 스크롤 트리거
  $(window).scroll(function () {
    //2. 요소의 offset().top 값 받아서 변수 설정
    let ElemTop = $('.smile ').offset().top;

    //3. scroll값 / 요소의 top값
    // 요소까지 도달하기 까지의 scroll 값의 비율을 0 ~ 1 까지 받아옴 ( 100분율 )
    console.log('scroll 값 : ' + window.scrollY);
    console.log('요소의 top 값: ' + ElemTop);

    let moveTrue = window.scrollY / ElemTop;
    console.log(moveTrue);

    //4. 받아온 값으로 조건을 걸어 이동시킬 거리에 곱하여 css를 제어한다.
    if (moveTrue < 1) {
      $('.smile').css({ left: moveTrue * 400 });
    }
  });
});

scroll() 메서드를 이용해 스크롤을 했을 때 작동시킬 코드를 작성한다.
페이지 가장 위부터 요소까지의 거리를 (top값)을 받아 변수에 넣는다.
(scroll값 / 요소의 top값) 을 통해 요소까지 도달하기 까지의 scroll 값의 비율을 0 ~ 1 까지 받아온다. ( 100분율 )

이 값을 콘솔에 찍어보면 아래와같다.