Odometer.js 라이브러리

한글자씩 휘리릭 넘어가는 모션을 보여줘야해서 사용하게 된 odometer.js 라이브러리

그런데 나는 화면에 해당세션이 보여질때 라이브러리가 작동하게 하고싶은 것

구글은 내 친구, 함 해보자고

 

https://slfc2s.csb.app/

Static Template

 

 

jqeury cdn은 필수임

//css cdn
<link rel="stylesheet" href="https://github.hubspot.com/odometer/themes/odometer-theme-default.css" />
//js cdn
<script src="https://cdnjs.cloudflare.com/ajax/libs/odometer.js/0.4.8/odometer.min.js"></script>

그러고 odometer의 css와 js cdn을 불러온다

 

<section class="section_01">
  section 1
</section>

<section class="section_02 counter">
  section 2
  <div class="counter-number">
    <span class="pxl-counter-number-value"></span>
  </div>
</section>
<section class="section_03">
  section 3
</section>

<section class="section_04">
  section 4
</section>

html 마크업은 간단하게 세션으로 구분지어 주고

오도미터가 들어갈 세션에 counter 클래스명과

해당 세션 안에 오도미터 라이브러리 박스를 넣어준다.

 

* {margin: 0; padding: 0; box-sizing: border-box;}
section {height: 100vw; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.section_01 { background: yellowgreen; }
.section_02 { background: coral; }
.section_03 { background: cornflowerblue; }
.section_04 { background: pink; }

css도 간단하게 배경색이랑 글자 위치만 잡아줌

 

 

<script type="text/javascript">
  function checkVisible(element, check = "above") {
    const viewportHeight = $(window).height(); // Viewport Height
    const scrolltop = $(window).scrollTop(); // Scroll Top
    const y = $(element).offset().top;
    const elementHeight = $(element).height();

    // 반드시 요소가 화면에 보여야 할경우
    if (check == "visible")
      return (
        y < viewportHeight + scrolltop && y > scrolltop - elementHeight
      );

    // 화면에 안보여도 요소가 위에만 있으면 (페이지를 로드할때 스크롤이 밑으로 내려가 요소를 지나쳐 버릴경우)
    if (check == "above") return y < viewportHeight + scrolltop;
  }

  // 리소스가 로드 되면 함수 실행을 멈출지 말지 정하는 변수
  let isVisible = false;

  // 이벤트에 등록할 함수
  const func = function () {
    if (!isVisible && checkVisible(".counter")) {
      isVisible = true;

      var el = document.querySelector(".pxl-counter-number-value");
      od = new Odometer({
        el: el,
        value: 0,
        format: "",
        theme: "default"
      });
      od.update(13329);
    }

    isVisible && window.removeEventListener("scroll", func);
  };

  window.addEventListener("scroll", func);
</script>

스크립트 구간

 

 

 

참고

https://inpa.tistory.com/entry/JS-%F0%9F%9A%80-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EB%82%B4%EB%A0%A4%EC%84%9C-%ED%8A%B9%EC%A0%95-%EC%98%81%EC%97%AD-%EA%B0%90%EC%A7%80%ED%95%98%EA%B8%B0

🚀 스크롤 내려서 특정 영역 감지하기