HS Lab
RoadmapDocsQuizzesLabs
MVP read-only

Interaction

스크롤 reveal

스크롤 위치에 따라 콘텐츠가 자연스럽게 등장하는 인터랙션입니다.

Demo

아래로 스크롤하면 카드가 부드럽게 나타납니다.

Observe

Observe 단계의 인터랙션을 실습 기록과 연결합니다.

Reveal

Reveal 단계의 인터랙션을 실습 기록과 연결합니다.

Refine

Refine 단계의 인터랙션을 실습 기록과 연결합니다.

Portfolio

Portfolio 단계의 인터랙션을 실습 기록과 연결합니다.

실습 정보

목표
스크롤 위치에 따라 콘텐츠가 자연스럽게 등장하는 인터랙션입니다.

난이도
medium

GitHub 경로
components/labs/demos/scroll-reveal-demo.tsx

ReactIntersectionObserverCSS Motion

회고 템플릿

  • AI 에이전트에게 준 지시문
  • 내가 수정한 부분
  • 막힌 점
  • 배운 점
  • 포트폴리오 활용 가능성
  • 다음 개선 사항