Algorithm Lab알고리즘의 모든 실행 단계를 미리 계산해 두고, 스크롤 위치를 단계 번호에 연결했어요. 재생 버튼 없이 내리면 앞으로, 올리면 되감겨요.
scrollYProgress 0.27STEP 12/46
steps[Math.round(0.27 x 45)]
어떻게 만들었나
01 · precomputegetBubbleSortSteps, getLPSSteps, getKMPSteps가 알고리즘을 한 번 실행해 상태 스냅샷 배열을 만들어요.
02 · useTransformuseScroll의 진행도(0 ~ 1)를 [0, steps.length - 1]로 바꾸고, 바뀔 때마다 현재 단계를 갱신해요.
03 · sticky300vh ~ 800vh 높이의 영역 안에서 시각화 영역만 sticky로 붙여 두어, 스크롤하는 동안 화면이 제자리에 머물러요.