Nuxt 4 base project
Hybride.
Parallax ontmoet Grid — één markdown-bestand per taal, alle vormgeving in de stylesheet van de pagina.
Scroll
01 — Grid binnen parallax
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.
Over het schrijven
Grid-layout en parallax-effecten in één bestand, volledig geschreven in markdown.
— Dit Markdown-bestand
02 — Horizontale scroll
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.
04 — Panoramische #background · 01 / 03
De achtergrond schuift
Schuif 1 — linkerkolom met inhoud boven de panoramische achtergrond.
04 — Panoramische #background · 02 / 03
Het grid blijft gelden
Schuif 2 — rechterkolom; het panorama blijft achter de tekst schuiven.
04 — Panoramische #background · 03 / 03
Eén video, drie schuiven
Schuif 3 — gecentreerd blok wanneer het panorama de rechterrand bereikt.
Het einde
Dat is het
Parallax-secties met grid-layouts, horizontale scroll en citaten — allemaal geschreven in één markdown-bestand per taal.