[{"data":1,"prerenderedAt":384},["ShallowReactive",2],{"page:nl:parallax":3},[4],{"id":5,"title":6,"body":7,"description":373,"extension":376,"meta":377,"navigation":378,"path":379,"seo":380,"stem":382,"__hash__":383},"page\u002Fnl\u002Fparallax.md","Parallax + Grid",{"type":8,"value":9,"toc":372},"minimark",[10,51,121,149,277,345],[11,12,16],"parallax-section",{"className":13,":hero":15},[14],"hero","true",[17,18,19],"grid-container",{},[20,21,23,32,37,44],"grid-cell",{"size":22},"10,4",[24,25,26],"p",{},[27,28,31],"span",{"className":29},[30],"eyebrow","Nuxt 4 base project",[33,34,36],"h1",{"id":35},"hybride","Hybride.",[24,38,39],{},[27,40,43],{"className":41},[42],"lead","Parallax ontmoet Grid — één markdown-bestand per taal, alle vormgeving in de stylesheet van de pagina.",[24,45,46],{},[27,47,50],{"className":48},[49],"cue","Scroll",[11,52,56],{"className":53},[54,55],"section-intro","panel",[17,57,58,69,91,105],{},[20,59,63],{"size":60,"className":61},"12,4",[62],"panel-label",[24,64,65],{},[27,66,68],{"className":67},[30],"01 — Grid binnen parallax",[20,70,74,79],{"size":71,"className":72},"6,4",[73],"panel-column",[75,76,78],"h2",{"id":77},"linker-kolom","Linker Kolom",[24,80,81,82,86,87,90],{},"Deze inhoud staat in een ",[83,84,85],"code",{},"GridCell"," met ",[83,88,89],{},"size=\"6,4\""," — 6 kolommen op desktop, 4 op mobiel. Het grid-systeem regelt de responsieve afmetingen automatisch.",[20,92,94,98],{"size":71,"className":93},[73],[75,95,97],{"id":96},"rechter-kolom","Rechter Kolom",[24,99,100,101,104],{},"Beide kolommen staan in een ",[83,102,103],{},"GridContainer",", dat zelf ook een MDC-blok is. De gutter en centrering komen van de grid-mixins — geen aangepaste CSS nodig.",[20,106,109],{"size":60,"className":107},[108],"panel-footer",[24,110,111,116],{},[27,112,115],{"className":113},[114],"footer-note","Verticale sectie",[27,117,120],{"className":118},[119],"footer-meta","GridContainer + GridCell",[11,122,125],{"className":123},[124],"quote",[17,126,127],{},[20,128,130,136,142],{"size":22,"margin":129},"1,0",[24,131,132],{},[27,133,135],{"className":134},[30],"Over het schrijven",[137,138,139],"blockquote",{},[24,140,141],{},"Grid-layout en parallax-effecten in één bestand, volledig geschreven in markdown.",[24,143,144],{},[27,145,148],{"className":146},[147],"attribution","— Dit Markdown-bestand",[150,151,152,205],"parallax-horizontal-scroll",{},[11,153,157],{"className":154,":wide":15,"depth":156},[155,55],"section-grid-2col","0.3",[17,158,159,168,182,192],{},[20,160,162],{"size":60,"className":161},[62],[24,163,164],{},[27,165,167],{"className":166},[30],"02 — Horizontale scroll",[20,169,171,175],{"size":71,"className":170},[73],[75,172,174],{"id":173},"tweekolomspaneel","Tweekolomspaneel",[24,176,177,178,181],{},"Dit is een parallax-sectie die horizontaal scrolt — en de inhoud respecteert het grid-systeem. De ",[83,179,180],{},"wide","-prop verwijdert de maximale breedtebeperking.",[20,183,185,189],{"size":71,"className":184},[73],[75,186,188],{"id":187},"grid-binnen-parallax","Grid Binnen Parallax",[24,190,191],{},"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.",[20,193,195],{"size":60,"className":194},[108],[24,196,197,201],{},[27,198,200],{"className":199},[114],"Horizontaal paneel",[27,202,204],{"className":203},[119],"Schuif 1 van 2",[11,206,210],{"className":207,":wide":15,"depth":209},[208,55],"section-grid-3col","0.4",[17,211,212,221,233,255,265],{},[20,213,215],{"size":60,"className":214},[62],[24,216,217],{},[27,218,220],{"className":219},[30],"03 — Drie kolommen",[20,222,225,230],{"size":223,"className":224},"4,4",[73],[226,227,229],"h3",{"id":228},"kaart-1","Kaart 1",[24,231,232],{},"Drie gelijke kolommen in het tweede horizontale paneel.",[20,234,236,240],{"size":223,"className":235},[73],[226,237,239],{"id":238},"kaart-2","Kaart 2",[24,241,242,243,247,248,247,252,254],{},"Markdown-opmaak werkt: ",[244,245,246],"strong",{},"vet",", ",[249,250,251],"em",{},"cursief",[83,253,83],{},".",[20,256,258,262],{"size":223,"className":257},[73],[226,259,261],{"id":260},"kaart-3","Kaart 3",[24,263,264],{},"Grid + parallax + horizontale scroll — allemaal vanuit markdown.",[20,266,268],{"size":60,"className":267},[108],[24,269,270,273],{},[27,271,200],{"className":272},[114],[27,274,276],{"className":275},[119],"Schuif 2 van 2",[150,278,281,303,324],{"background-src":279,"background-width":280},"\u002Fvideos\u002Fservices_desktop.mp4","200vw",[11,282,285],{"className":283,":wide":15,":instant":15},[284],"background-demo",[17,286,287],{},[20,288,290,296,300],{"size":289},"5,4",[24,291,292],{},[27,293,295],{"className":294},[30],"04 — Panoramische #background · 01 \u002F 03",[75,297,299],{"id":298},"de-achtergrond-schuift","De achtergrond schuift",[24,301,302],{},"Schuif 1 — linkerkolom met inhoud boven de panoramische achtergrond.",[11,304,306],{"className":305,":wide":15,":instant":15},[284],[17,307,308],{},[20,309,311,317,321],{"size":289,"margin":310},"7,0",[24,312,313],{},[27,314,316],{"className":315},[30],"04 — Panoramische #background · 02 \u002F 03",[75,318,320],{"id":319},"het-grid-blijft-gelden","Het grid blijft gelden",[24,322,323],{},"Schuif 2 — rechterkolom; het panorama blijft achter de tekst schuiven.",[11,325,327],{"className":326,":wide":15,":instant":15},[284],[17,328,329],{},[20,330,332,338,342],{"size":71,"margin":331},"3,0",[24,333,334],{},[27,335,337],{"className":336},[30],"04 — Panoramische #background · 03 \u002F 03",[75,339,341],{"id":340},"eén-video-drie-schuiven","Eén video, drie schuiven",[24,343,344],{},"Schuif 3 — gecentreerd blok wanneer het panorama de rechterrand bereikt.",[11,346,350],{"className":347,":overlap":15,"id":349},[348],"section-finale","finale",[17,351,352],{},[20,353,356,362,366],{"size":354,"margin":355},"8,4","2,0",[24,357,358],{},[27,359,361],{"className":360},[30],"Het einde",[75,363,365],{"id":364},"dat-is-het","Dat is het",[24,367,368],{},[27,369,371],{"className":370},[42],"Parallax-secties met grid-layouts, horizontale scroll en citaten — allemaal geschreven in één markdown-bestand per taal.",{"title":373,"searchDepth":374,"depth":374,"links":375},"",2,[],"md",{},true,"\u002Fnl\u002Fparallax",{"title":6,"description":381},"Parallax-effecten gecombineerd met grid-layout in één markdown-bestand.","nl\u002Fparallax","ffr6r2pPGJ-cU4HdkHmfHjD4w6GerkPUXkSltA7ifhc",1793910491885]