부드러운 스크롤 효과 적용해 보기

0 Shares
0
0
0

블로그 심심해 3탄을 준비했다. 이번에는 화면 스크롤이 브레이크걸린듯 딱딱 끊어진다. 보통의 홈페이지들이 다 이렇다.. 하지만 난 부드러운게 좋은걸… 🙂

이 효과도 사실 플러그인이나, jQuery 라이브러리로 상당히 많이 있다. 그래서 나도 플러그인을 적용해서 간단히 끝내려 했지만, 먹히지 않는다.. 그렇다 플러그인이라고 해서 다 적용되진 않는다. 그럼 어떻게 하지?

여러가지 소스를 테스트 하던중.. 가장 이상적인걸 찾았다. 아래의 코드를 적용하기만 하면 끝이다. 워드프레스에서는 jQuery $가 먹히지 않으니 항상 함수로 감싸주는것만 주의하면 된다. 아니면 소스가 짧다면 $대신 jQuery로 치환해 주자.

전에 소스가 별루였다. 그래서 다시 찾아서 공유한다.

마누라때문에 만든 블로그인데, 이상하게 자꾸 이것저것 추가하게 된다. 🤣

아래 코드를 적용하기만 하면 화면이 부드럽게 스크롤된다. 모바일에서는 브라우저단에서 지원하기 때문에 보통 잘 느끼지 못하지만, PC에서는 확실히 부드럽다.

전역에 적용되므로, 심심해2탄에서 워드프레스 함수에 JS로드하는법을 참고하면 된다.
참고로 튜토리얼이 아니니 설명이 친절하지 않다는점.. 이곳에서 궁금한점은 댓글을 남기면, 아는선에서 답변드리도록 하겠다.

출처 : https://github.com/shererere/scrooth

class Scrooth {
  constructor({element = window, strength=10, acceleration = 1.2,deceleration = 0.975}={}) {
    this.element = element;
    this.distance = strength;
    this.acceleration = acceleration;
    this.deceleration = deceleration;
    this.running = false;

    this.element.addEventListener('wheel', this.scrollHandler.bind(this), {passive: false});
    this.element.addEventListener('mousewheel', this.scrollHandler.bind(this), {passive: false});
    this.scroll = this.scroll.bind(this);
  }

  scrollHandler(e) {
    e.preventDefault();

    if (!this.running) {
      this.top = this.element.pageYOffset || this.element.scrollTop || 0;
      this.running = true;
      this.currentDistance = e.deltaY > 0 ? 0.1 : -0.1;
      this.isDistanceAsc = true;
      this.scroll();
    } else {
      this.isDistanceAsc = false;
      this.currentDistance = e.deltaY > 0 ? this.distance : -this.distance;
    }
  }

  scroll() {
    if (this.running) {
      this.currentDistance *= this.isDistanceAsc === true ? this.acceleration : this.deceleration;
      Math.abs(this.currentDistance) < 0.1 && this.isDistanceAsc === false ? this.running = false : 1;
      Math.abs(this.currentDistance) >= Math.abs(this.distance) ? this.isDistanceAsc = false : 1;

      this.top += this.currentDistance;
      this.element.scrollTo(0, this.top);
      
      requestAnimationFrame(this.scroll);
    }
  }
}

const scroll = new Scrooth({
  element: window,
  strength: 20,
  acceleration: 1.5,
  deceleration: 0.975,
});
Last updated on: 2021-09-11, 오전 4:08
답글 남기기

이메일 주소는 공개되지 않습니다. 필수 항목은 *(으)로 표시합니다

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.

You May Also Like