[{"data":1,"prerenderedAt":227},["ShallowReactive",2],{"page:nl:parallax":3},[4],{"id":5,"title":6,"body":7,"description":215,"extension":219,"meta":220,"navigation":221,"path":222,"seo":223,"stem":225,"__hash__":226},"page\u002Fnl\u002Fparallax.md","Parallax + Grid",{"type":8,"value":9,"toc":214},"minimark",[10,25,64,74,154,202],[11,12,16,21],"parallax-section",{"className":13,":hero":15},[14],"hero","true",[17,18,20],"h1",{"id":19},"hybride","Hybride.",[22,23,24],"p",{},"Parallax ontmoet Grid — allemaal vanuit markdown",[11,26,27],{},[28,29,30,51],"grid-container",{},[31,32,34,39],"grid-cell",{"size":33},"6,4",[35,36,38],"h2",{"id":37},"linker-kolom","Linker Kolom",[22,40,41,42,46,47,50],{},"Deze inhoud staat in een ",[43,44,45],"code",{},"GridCell"," met ",[43,48,49],{},"size=\"6,4\""," — 6 kolommen op desktop, 4 op mobiel. Het grid-systeem regelt de responsieve afmetingen automatisch.",[31,52,53,57],{"size":33},[35,54,56],{"id":55},"rechter-kolom","Rechter Kolom",[22,58,59,60,63],{},"Beide kolommen staan in een ",[43,61,62],{},"GridContainer",", dat zelf ook een MDC-blok is. De gutter en centrering komen van de grid-mixins — geen aangepaste CSS nodig.",[11,65,68,71],{"className":66},[67],"quote",[22,69,70],{},"\"Grid-layout en parallax-effecten in één bestand, volledig geschreven in markdown.\"",[22,72,73],{},"— Dit Markdown-bestand",[75,76,77,106],"parallax-horizontal-scroll",{},[11,78,82],{"className":79,":wide":15,"depth":81},[80],"section-grid-2col","0.3",[28,83,84,97],{},[31,85,86,90],{"size":33},[35,87,89],{"id":88},"tweekolomspaneel","Tweekolomspaneel",[22,91,92,93,96],{},"Dit is een parallax-sectie die horizontaal scrolt — en de inhoud respecteert het grid-systeem. De ",[43,94,95],{},"wide","-prop verwijdert de maximale breedtebeperking.",[31,98,99,103],{"size":33},[35,100,102],{"id":101},"grid-binnen-parallax","Grid Binnen Parallax",[22,104,105],{},"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.",[11,107,111],{"className":108,":wide":15,"depth":110},[109],"section-grid-3col","0.4",[28,112,113,124,145],{},[31,114,116,121],{"size":115},"4,4",[117,118,120],"h3",{"id":119},"kaart-1","Kaart 1",[22,122,123],{},"Drie gelijke kolommen in het tweede horizontale paneel.",[31,125,126,130],{"size":115},[117,127,129],{"id":128},"kaart-2","Kaart 2",[22,131,132,133,137,138,137,142,144],{},"Markdown-opmaak werkt: ",[134,135,136],"strong",{},"vet",", ",[139,140,141],"em",{},"cursief",[43,143,43],{},".",[31,146,147,151],{"size":115},[117,148,150],{"id":149},"kaart-3","Kaart 3",[22,152,153],{},"Grid + parallax + horizontale scroll — allemaal vanuit markdown.",[75,155,158,174,188],{"background-src":156,"background-width":157},"\u002Fvideos\u002Fservices_desktop.mp4","200vw",[11,159,162],{"className":160,":wide":15,":instant":15},[161],"background-demo",[28,163,164],{},[31,165,167,171],{"size":166},"5,4",[35,168,170],{"id":169},"panoramische-background","Panoramische #background",[22,172,173],{},"Schuif 1 — linkerkolom met inhoud boven de panoramische achtergrond.",[11,175,177],{"className":176,":wide":15,":instant":15},[161],[28,178,179],{},[31,180,182,185],{"size":166,"margin":181},"7,0",[35,183,170],{"id":184},"panoramische-background-1",[22,186,187],{},"Schuif 2 — rechterkolom; het panorama blijft achter de tekst schuiven.",[11,189,191],{"className":190,":wide":15,":instant":15},[161],[28,192,193],{},[31,194,196,199],{"size":33,"margin":195},"3,0",[35,197,170],{"id":198},"panoramische-background-2",[22,200,201],{},"Schuif 3 — gecentreerd blok wanneer het panorama de rechterrand bereikt.",[11,203,207,211],{"className":204,":overlap":15,"id":206},[205],"section-finale","finale",[35,208,210],{"id":209},"dat-is-het","Dat is het",[22,212,213],{},"Parallax-secties met grid-layouts, horizontale scroll en citaten — allemaal geschreven in één markdown-bestand per taal.",{"title":215,"searchDepth":216,"depth":216,"links":217},"",2,[218],{"id":209,"depth":216,"text":210},"md",{},true,"\u002Fnl\u002Fparallax",{"title":6,"description":224},"Parallax-effecten gecombineerd met grid-layout in één markdown-bestand.","nl\u002Fparallax","OUkL7N-8IO-NNn9PGkamISFIbqgrNW1PjmI-7Wokb-U",1778618128207]