1ed3c95542
"티가 안 난다"는 지적이 맞았다. 세 가지를 동시에 잘못하고 있었다. 1. 이동량이 모자랐다 여유를 28% 잡아놓고 92px 만 움직였다. 스크롤 1800px 구간에서 5%다. 공식은 이미지를 컨테이너보다 크게 만들고 초과분 전체를 움직이는 것. depth 0.45 -> 높이 145%, translateY(-31.03%). 같은 구간에서 374px. translateY(%) 는 자기 크기 기준이라 컨테이너 높이를 몰라도 맞는다. 2. overflow: hidden 이 view() 타임라인을 죽이고 있었다 overflow: hidden 은 스크롤 컨테이너를 만들고, 그러면 자식의 view() 가 문서가 아니라 그 상자를 기준으로 잡힌다. 이미지는 상자 안에서 늘 같은 자리라 진행도가 고정된다. 콘솔 에러도 없고 computed 값도 정상이라 두 스크롤 위치에서 transform 을 재보고서야 이동 0px 인 것을 알았다. 잘라내는 일은 섹션의 overflow: clip 에 맡겼다. 3. opacity 로 눌러 이미지를 지웠다 어두운 광원 사진을 opacity 0.5 로 깔면 검정도 빛도 같이 죽는다. mix-blend-mode: screen 으로 바꿨다 — 검정은 투명, 밝은 곳만 더해진다. 그래서 불투명도 0.85~1.0 을 써도 본문 대비가 안전하다. 생성 프롬프트도 같은 함정이었다. "어둡게"를 너무 강하게 넣어서 안전한 이미지가 아니라 없는 이미지를 만들었다. 격자 배경 제거 사진이 들어온 뒤로 배경이 두 겹이라 서로 경쟁했고 표로 읽혔다. 배경도 한 섹션에 하나다. 스킬 motion.md 에 넷 다 반영 이동량 공식 · overflow 함정 · screen 합성 · 배경은 한 겹 |
||
|---|---|---|
| .. | ||
| references | ||
| package.json | ||
| SKILL.md | ||