TOP

CENTER

BOTTOM

  • 아래로 스크롤하면 컴포넌트가 Variant 2로 전환됩니다.

  • 스크롤을 반복하며 상태 변화(Variant 변경)를 확인해보세요.

Variant 1

Variant 1

Variant 1

Variant 1

Variant 1

Variant 1

  • 위로 스크롤하면 컴포넌트가 Variant 2로 전환됩니다.

  • 스크롤을 반복하며 상태 변화(Variant 변경)를 확인해보세요.

Variant 1

Variant 1

Variant 1

Variant 1

Variant 1

Variant 1

  • 레이어의 윗부분이 화면에 보이기 시작하면 Variant가 전환됩니다.

  • 스크롤을 반복해 레이어가 화면에 들어올 때마다 상태 변화(Variant 전환)를 확인해보세요.

Variant 3

Variant 3

Variant 3

TOP

CENTER

BOTTOM

Variant 3

Variant 3

Variant 3

Variant 3

TOP

CENTER

BOTTOM

Variant 3

  • 레이어의 중앙이 화면에 보이기 시작하면 Variant가 전환됩니다.

  • 스크롤을 반복해 레이어가 화면에 들어올 때마다 상태 변화(Variant 전환)를 확인해보세요.

Variant 5

Variant 5

Variant 5

TOP

CENTER

BOTTOM

Variant 5

Variant 5

Variant 5

Variant 5

TOP

CENTER

BOTTOM

Variant 5

  • 레이어의 아랫부분이 화면에 보이기 시작하면 Variant가 전환됩니다.

  • 스크롤을 반복해 레이어가 화면에 들어올 때마다 상태 변화(Variant 전환)를 확인해보세요.

Variant 7

Variant 7

Variant 7

TOP

CENTER

BOTTOM

Variant 7

Variant 7

Variant 7

Variant 7

TOP

CENTER

BOTTOM

Variant 7

  • 스크롤하여 각 섹션이 화면 중앙에 도달하면 컴포넌트의 Variant가 전환됩니다.

  • Section 1에서는 Variant 10, Section 2에서는 Variant 11로 바뀌며, 스크롤을 반복하면 상태 변화도 함께 반복됩니다.

SECTION-1

ENTER

SECTION-2

ENTER

Variant 9

Variant 9

Variant 9

Create a free website with Framer, the website builder loved by startups, designers and agencies.