Javascript30 - slide in on scroll

이번 실습은 scroll event를 통해 특정 위치에 도달하게 되면 휙~하고 image들이 slide-in 되는 효과를 만들어 보았다.

window.innerHeight, element.offsetTop등 새로운 속성에 대해 배웠다.

최근에 element.getBoudingClientRect에 대해서 공부했었는데, 문서 내에 element의 위치를 정의하는 속성도 참 많은것 같다. 😅

공부하다 살짝 멘탈이 흔들렸는데, 조만간 포스팅을 통해 정리해 볼 수 있도록 해야겠다.

Learning Point

• Function.prototype.apply에 대해 학습한다
• javascript scroll event에 대해 학습한다

HTML Part

테스트를 위해 lorem으로 dummy text를 많이 추가한 관계로
코드가 너무 길어서 생략한다. 😁 (궁금하신 분들은 여기서 확인하시면 됩니다!)

CSS Part

html {
  box-sizing: border-box;
  background: #e1c5bf;
  font-family: "helvetica neue";
  font-size: 20px;
  font-weight: 200;
}

body {
  margin: 0;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

h1 {
  margin-top: 0;
}

.site-wrap {
  max-width: 700px;
  margin: 100px auto;
  background: white;
  padding: 40px;
  text-align: justify;
}

.align-left {
  float: left;
  margin-right: 20px;
}

.align-right {
  float: right;
  margin-left: 20px;
}

.slide-in {
  opacity: 0;
  transition: all 0.5s;
}

.align-left.slide-in {
  transform: translateX(-30%) scale(0.95);
}

.align-right.slide-in {
  transform: translateX(30%) scale(0.95);
}

.slide-in.active {
  opacity: 1;
  transform: translateX(0%) scale(1);
}

Javascript Part

function debounce(func, wait = 20, immediate = true) {
  let timeout;

  return function () {
    const context = this;
    const args = arguments;
    
    let callNow = immediate && !timeout;

    const later = function () {
      timeout = null;
      if (!immediate) func.apply(context, args);
    };

    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
}

function classtoggle(e) {
  imgs.forEach((img) => {
    const scrolledLength = window.scrollY + window.innerHeight;
    const showImg = img.offsetTop + img.offsetHeight / 2;
    const disappearImg = img.offsetTop + img.offsetHeight;

    if (scrolledLength > showImg) img.classList.add("active");
    if (window.scrollY > disappearImg) img.classList.remove("active");
  });
}

const imgs = document.querySelectorAll(".slide-in");
window.addEventListener("scroll", debounce(classtoggle));

정리

debounce 함수

사용하기만 해 보았던 Lodash 라이브러리의 debounce 메서드를 구현해 보았다. 실제로 클로저를 활용한 코드를 처음 구현해 보아서 신기했다. (사실 코드 이해가 오래걸렸다...😂😂😂)

classToggle 함수

classToggle함수는 실제로 이미지를 slide-in 해주는 함수이다.

이미지가 화면에 정확히 절반정도 나타났을때 active class를 주어 나타나게 할 수 있도록 했다. 반대로 화면에서 완전히 사라지면 active class를 제거하여 이미지가 다시 사라질 수 있도록 해 주었다.

---