Scroll through the stages
Each section below is a live HTML and CSS demo. The page keeps the original motion cases and adds extra variations for stronger reveals, portrait media, and short captions.
Directional image reveal
The image enters from the left while the caption stays centered in the normal reading position.
Image reveal from left
This keeps the original .vss--image-left case. The media moves into place as it reaches the sticky stage.
Readable caption entrance
The caption starts off-canvas on the left and settles at the center of the image stage.
Caption left to center
This tests .vss--caption-left-center with an image that reveals upward from the bottom.
Mirrored caption entrance
The same readable pattern runs from the right side, paired with a top-down image reveal.
Caption right to center
This tests .vss--caption-right-center. The caption lands in the same centered reading area.
Pass-through caption motion
These two stages are stronger visual effects. They work best when the caption is short and direct.
Caption crosses the stage
This tests .vss--caption-left-right with a wider travel distance.
Reverse pass-through
This tests .vss--caption-right-left. The caption travels in the opposite direction.
Small movement for longer text
A short travel distance creates a quieter caption entrance while preserving the sticky image behavior.
Short caption travel
This tests --vss-caption-motion-distance: 6rem. The image uses .vss--image-none so only the caption moves.
Image fitting and positioning
The next stages exercise contain mode and object-position overrides without changing the component markup.
Contained square media
This tests --vss-image-fit: contain. The stage keeps the entire square image visible.
Image position override
This tests --vss-image-position: left top for wide images with an important edge.
Custom property functions
This stage keeps the original variable-function test with var(), calc(), and clamp() inside inline custom properties.
Variable-driven stage sizing
This tests computed custom property values for height, scene duration, delay, motion distance, and scale.
Image-only story stage
The caption element is omitted here, so the section behaves as a clean sticky media reveal.
The image-only case has no caption markup. The media reveal still runs, and the layout remains readable when scroll-driven animations are unavailable.
Expanded reveal variations
These additional stages extend the original demo set with a stronger entrance and a portrait media layout.
Large image start offset
This expanded case tests a wider image offset and a smaller starting scale for a more dramatic entrance.
Vertical image inside a wide stage
This expanded case combines --vss-image-fit: contain with a portrait image source.
End of demo
The page is a standalone static HTML demo. Open index.htm directly in a browser to view the scroll effects.