Parallax
Parallax
Section titled “Parallax”Syntax
Section titled “Syntax”| Form | Syntax | Usage |
|---|---|---|
| Image | { .parallax } | Component base. |
| Height | height="420" | Scene size. |
| Layers | layers="/clouds.svg@0.12, /front.svg@0.70" | Images and speeds. |
| Lazy | loading=lazy | Deferred loading. |
| Directive | ::: parallax { height="420" } | Block form. |
The historical form extends the classic Markdown image: the main image remains the first layer, and layers adds comma-separated images with a @0.35 speed.
Multi-layer landscape
Section titled “Multi-layer landscape”{ .parallax height="440" layers="/images/parallax/clouds.svg@0.10, /images/parallax/mountains-back.svg@0.24, /images/parallax/fog.svg@0.36, /images/parallax/mountains-front.svg@0.48, /images/parallax/foreground.svg@0.72" loading=lazy }
The sky moves slowly, clouds and mountains follow at intermediate speeds, then the foreground slides faster.
The sky moves slowly, clouds and mountains follow at intermediate speeds, then the foreground slides faster.
Softer motion
Section titled “Softer motion”{ .parallax height="340" layers="/images/parallax/clouds.svg@0.06, /images/parallax/mountains-back.svg@0.12, /images/parallax/mountains-front.svg@0.20, /images/parallax/foreground.svg@0.34" loading=lazy }Stronger motion
Section titled “Stronger motion”{ .parallax height="460" layers="/images/parallax/clouds.svg@0.18, /images/parallax/mountains-back.svg@0.38, /images/parallax/fog.svg@0.58, /images/parallax/mountains-front.svg@0.82, /images/parallax/foreground.svg@1.12" loading=lazy }
This mode increases the gap between layers for a more spectacular effect, useful on a presentation page or immersive section.This mode increases the gap between layers for a more spectacular effect, useful on a presentation page or immersive section.