CSS POSITIONING PATTERNS

Sticky Scroll Gallery

止める、重ねる、見せ続ける。 Stickyで作るスクロール表現。

01

LIVE PATTERN GALLERY

同じSticky、違う見せ方

11 PATTERNS2 AXES

sticky.local / gallery

STACKING CARDSSTICKY ONLY
STATE
BEFORE
PROGRESS
0%
TARGET
CARD 01
02

STICKY ANATOMY

止まる位置は、親で決まる

01

Insetが開始線topを越えた時にStickyになります。

02

親の中だけ親の終端へ届くとStickyも一緒に離れます。

03

最寄りのScrollportViewportとは限りません。

PATTERN RECIPE

Stacking Cards

カードごとにtopをずらすと、重なった後も見出しが残ります。