Parallax
Parallax
Section intitulée « Parallax »| 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 intitulée « 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 intitulée « 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 intitulée « 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.