-
올바른 방식: 클래스 이름을 공백으로 구분
$rolltextWrap.removeClass("a1 a2 a3 a4"); -
잘못된 방식: 콤마로 구분 (하나의 문자열로 인식됨)
$rolltextWrap.removeClass("a1, a2, a3, a4");
-> 작동하지 않음
클론코딩하는데 헷갈렷던...
onUpdate: (self) => { const bar = self.progress.toFixed(3) * 100; }
에 대한 풀이
1. onUpdate: (self) => { ... }
onUpdate는 ScrollTrigger가 스크롤할 때마다 실행되는 콜백 함수입니다. 즉, 스크롤이 진행될 때마다 특정 작업을 실행하고 싶을 때 사용됩니다.
이 함수는 매번 스크롤 위치가 변할 때마다 실행되며, self라는 매개변수로 현재 ScrollTrigger 객체의 상태를 전달받습니다.
2. self.progress
self.progress는 현재 스크롤 진행 상황을 0에서 1 사이의 숫자로 나타내는 값입니다.
예를 들어:
0은 트리거가 시작 위치에 있는 상태를 의미합니다.
1은 트리거가 끝 위치에 도달한 상태를 의미합니다.
0.5는 트리거가 절반 정도 진행된 상태를 의미합니다.
따라서, self.progress는 현재 스크롤 상태를 비율로 나타내는 값입니다.
3. .toFixed(3)
toFixed(3)는 숫자를 소수점 셋째 자리까지 나타내는 메서드입니다.
예를 들어 self.progress가 0.87654321이라면, toFixed(3)를 사용하면 0.877로 만들어줍니다.
이는 스크롤 진행 값을 3자리 소수점까지 반올림해서 간결하게 보여주기 위한 방법입니다.
4. * 100
스크롤 진행 상황을 퍼센트(%)로 표현하기 위해 self.progress에 100을 곱하는 것입니다. 즉, 0.5라면 50% 진행된 것이고, 0.8이라면 80% 진행된 것을 의미합니다.
self.progress는 0에서 1 사이의 값이므로, 이를 100으로 바꾸면 직관적으로 스크롤이 얼마나 진행되었는지를 퍼센트로 나타낼 수 있습니다.
