안녕하세요 :) 무택입니다🧔
오늘은 웹사이트 서치하다가 좋아 보이는 기능을 발견해서 그 기능에 대해 기록해보려 합니다.
스크롤 시 천천히, 부드럽게 보여주는 애니메이션에 대한 내용입니다.
smoothwheel 제이쿼리를 찾아보다가 문제점이 있어서 실제 적용하기는 힘들어 보여서
실제로 더 서치 하다가 적용 가능한 scrooth라이브러리를 발견해서 두 가지를 남겨봅니다.
1. smoothwheel.js
원본 링크
-
https://github.com/fatlinesofcode/jquery.smoothwheel
GitHub - fatlinesofcode/jquery.smoothwheel: Cross browser smooth mouse wheel and trackpad scrolling
Cross browser smooth mouse wheel and trackpad scrolling - GitHub - fatlinesofcode/jquery.smoothwheel: Cross browser smooth mouse wheel and trackpad scrolling
github.com
<html>
<head>
<meta charset="utf-8">
<style>
div { width: 100%; height: 120vh; }
div:nth-child(1) { background-color: #c7c7c7; }
div:nth-child(2) { background-color: #777; }
div:nth-child(3) { background-color: #c1c8d1; }
</style>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
<script src="http://fatlinesofcode.github.io/jquery.smoothwheel/src/jquery.smoothwheel.js"></script>
<script>
$(document).ready(function () {
$("html").smoothWheel()
});
</script>
</head>
<div> 1섹션</div>
<div> 2섹션</div>
<div> 3섹션</div>
</html>codepen으로 적용시 기능이 안 돌아가서 부득이하게 전체코드로 남깁니다ㅜ
? 문제점
-
스크롤시 속도가 너무 느린 감이 있어 조절 후 적용이 필요하다.
a태그로 섹션을 이동하거나 우측 스크롤바를 이용해 드래그하고 나면, 마우스휠로 스크롤 시 오류가 발생해서 해결 후 적용이 필요하다.
2. scrooth.js
#HTML
<head>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"
integrity="sha256-oP6HI9z1XaZNBrJURtCoUT5SUnxFr8s3BzRl+cbzUq8=" crossorigin="anonymous"></script>
</head>
<section id="wrap">
<div class="div"> 1섹션</div>
<div class="div"> 2섹션</div>
<div class="div"> 3섹션</div>
</section>
<!-- 출처
https://github.com/shererere/scrooth -->#CSS
div {
width: 100%;
height: 200vh;
}
.div:nth-child(1) {
background-color: #c7c7c7;
}
.div:nth-child(2) {
background-color: #777;
}
.div:nth-child(3) {
background-color: #c1c8d1;
}#JS
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: 27, //스크롤 한번에 이동하는 거리
acceleration: 1.75,
deceleration: .875,
});
원본 링크
-
https://github.com/shererere/scrooth
GitHub - shererere/scrooth: Smooth scrolling effect (while using mouse wheel). No jQuery or other unnecessary stuff needed.
Smooth scrolling effect (while using mouse wheel). No jQuery or other unnecessary stuff needed. - GitHub - shererere/scrooth: Smooth scrolling effect (while using mouse wheel). No jQuery or other u...
github.com
See the Pen [jQuery]Scrooth 라이브러리 by TytanLee (@TytanLee) on CodePen.
scrooth 라이브러리는 매개변수를 조절해서 커스텀할 수 있으나 'acceleration'와 'deceleration'는 정확히 뭔지 잘 모르겠다..
위 라이브러리도 매개변수를 잘 조절해서 사용하면 좋은 UX를 만들 수 있을 것 같다.
'🧑💻개발 > 라이브러리' 카테고리의 다른 글
| [라이브러리]다양한 애니메이션을 간단하게 사용해보자(animate.css) (0) | 2023.05.08 |
|---|---|
| 박스 안에서 텍스트 올라오는 애니메이션(animate 라이브러리 활용) (0) | 2023.05.02 |
| [라이브러리]유튜브영상을 배경으로 활용하기(YTPlayer)+코드 간소화 (0) | 2023.04.02 |
| [라이브러리]티스토리 코드블럭 스킨 적용(highlight.js) + 적용오류 해결 (0) | 2023.02.28 |
| [라이브러리]CounterUp - 숫자 카운트하며 올라가는 라이브러리 (0) | 2023.02.27 |
