블로그 심심해 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: 2022-01-29, am 12:35
