스크롤 등장

CSSComposite
전체 목록

아래로 스크롤해 보세요 ↓

1단계

계정을 만듭니다.

2단계

팀원을 초대합니다.

3단계

프로필을 채웁니다.

4단계

첫 프로젝트를 만듭니다.

5단계

작업을 나눠 맡깁니다.

6단계

진행 상황을 확인합니다.

7단계

피드백을 주고받습니다.

8단계

결과를 공유합니다.

스크롤해 보세요

요소가 화면에 들어온 정도를 애니메이션 진행도로 씁니다(animation-timeline: view()). 반쯤 들어오면 반쯤 나타나는 식입니다. 예전에는 IntersectionObserver 같은 JS가 필요했지만, 이제는 CSS만으로 됩니다. 지원하지 않는 브라우저에서는 요소가 처음부터 보이도록 @supports로 감쌌습니다.

값 조정

바꾼 값은 아래 코드에 바로 반영됩니다.

지속 시간
스크롤 위치에 연동
애니메이션 속성
transform, opacity
렌더링 비용
Composite