Hybride.
Parallax ontmoet Grid — allemaal vanuit markdown
Linker Kolom
Deze inhoud staat in een GridCell met size="6,4" — 6 kolommen op desktop, 4 op mobiel. Het grid-systeem regelt de responsieve afmetingen automatisch.
Rechter Kolom
Beide kolommen staan in een GridContainer, dat zelf ook een MDC-blok is. De gutter en centrering komen van de grid-mixins — geen aangepaste CSS nodig.
"Grid-layout en parallax-effecten in één bestand, volledig geschreven in markdown."
— Dit Markdown-bestand
Tweekolomspaneel
Dit is een parallax-sectie die horizontaal scrolt — en de inhoud respecteert het grid-systeem. De wide-prop verwijdert de maximale breedtebeperking.
Grid Binnen Parallax
Elke kolom is uitgelijnd op hetzelfde grid als de rest van de pagina. Wijzig het vensterformaat om het responsieve gedrag binnen de horizontale scroll te zien.
Panoramische #background
Schuif 1 — linkerkolom met inhoud boven de panoramische achtergrond.
Panoramische #background
Schuif 2 — rechterkolom; het panorama blijft achter de tekst schuiven.
Panoramische #background
Schuif 3 — gecentreerd blok wanneer het panorama de rechterrand bereikt.
Dat is het
Parallax-secties met grid-layouts, horizontale scroll en citaten — allemaal geschreven in één markdown-bestand per taal.