Diorama dat met de muis meeschuift Nieuw

<!-- Diorama dat met de muis meeschuift · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="hdi">
<div class="hdi__l" data-d="4" aria-hidden="true"><svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMax slice"><rect width="800" height="500" fill="#f4f3f1"/><circle cx="640" cy="160" r="56" fill="#F5480F"/></svg></div>
<div class="hdi__l" data-d="10" aria-hidden="true"><svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMax slice"><path d="M-40 330 C 80 270 170 300 260 280 S 430 230 520 270 S 700 250 840 290 V 520 H -40 Z" fill="#d7d1c8"/></svg></div>
<div class="hdi__l" data-d="18" aria-hidden="true"><svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMax slice"><path d="M-40 370 C 120 330 220 360 330 340 S 560 300 680 330 S 800 320 840 330 V 520 H -40 Z" fill="#a8a196"/><g fill="#6f6a62"><path d="M90 352 l14 -48 l14 48z"/><path d="M118 350 l11 -38 l11 38z"/><path d="M600 330 l16 -56 l16 56z"/><path d="M632 332 l12 -42 l12 42z"/><path d="M660 334 l10 -34 l10 34z"/></g></svg></div>
<div class="hdi__l" data-d="28" aria-hidden="true"><svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMax slice"><path d="M-40 410 C 140 380 300 400 420 392 S 700 372 840 390 V 520 H -40 Z" fill="#4a463f"/><g><path d="M470 398 l38 -52 l38 52z" fill="#F5480F"/><path d="M508 346 l0 52" stroke="#0a0a0a" stroke-width="3"/><path d="M498 398 l10 -16 l10 16z" fill="#0a0a0a"/><path d="M560 396 l26 -36 l26 36z" fill="#f4f3f1"/><path d="M586 360 l0 36" stroke="#0a0a0a" stroke-width="2"/></g></svg></div>
<div class="hdi__l" data-d="44" aria-hidden="true"><svg viewBox="0 0 800 500" preserveAspectRatio="xMidYMax slice"><path d="M-60 452 C 160 430 380 446 560 438 S 760 430 860 440 V 520 H -60 Z" fill="#0a0a0a"/><g stroke="#0a0a0a" stroke-width="3" stroke-linecap="round"><path d="M700 444 q-6 -30 -2 -52"/><path d="M712 444 q4 -26 12 -40"/><path d="M690 446 q-14 -18 -20 -34"/><path d="M60 452 q-4 -24 4 -40"/><path d="M72 452 q8 -18 16 -26"/></g></svg></div>
<div class="hdi__txt hdi__l" data-d="-8">
<h2 class="hdi__h">Kamperen tussen de heide</h2>
<p class="hdi__p">Camping De Hondsrug bij Exloo. Ruime plekken vanaf € 24 per nacht.</p>
<a class="hdi__cta" href="#hk-diorama">Reserveer een plek</a>
</div>
</div>
</div>

/* Diorama dat met de muis meeschuift · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.hdi{position:absolute;inset:0;overflow:hidden;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;text-align:left;touch-action:pan-y}
.hdi *,.hdi *::before,.hdi *::after{box-sizing:border-box}
.hdi__l{position:absolute;inset:-7% -7% -8% -7%;will-change:transform}
.hdi__l svg{display:block;width:100%;height:100%}
.hdi__txt{inset:auto;left:20px;top:16px;right:20px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.hdi__h{margin:0;font:700 clamp(20px,7cqi,42px)/1.02 'Switzer',sans-serif;letter-spacing:-.025em;max-width:9em}
.hdi__p{margin:0;max-width:min(22em,58%);font:400 clamp(12px,2.9cqi,15px)/1.4 'Switzer',sans-serif;color:#2a2722}
.hdi__cta{margin-top:4px;padding:9px 14px;background:#0a0a0a;color:#fff;border-radius:4px;font:600 13px/1 'Switzer',sans-serif;text-decoration:none;transition:background-color .16s}
.hdi__cta:hover{background:#F5480F;color:#0a0a0a}
.hdi__cta:focus-visible{outline:2px solid #F5480F;outline-offset:3px}

// Diorama dat met de muis meeschuift · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie
// root = het element waarin de HTML staat
function init(root){
const w=root.querySelector('.hdi');if(!w)return;
if(matchMedia('(prefers-reduced-motion: reduce)').matches)return;
const L=[...w.querySelectorAll('.hdi__l')].map(el=>({el,d:+el.dataset.d||0}));
let tx=0,ty=0,x=0,y=0,raf=0,hover=false,vis=true,t0=performance.now();
function frame(n){if(!hover){const s=(n-t0)/1000;tx=Math.sin(s*.5)*.35;ty=Math.sin(s*.33)*.15;}
x+=(tx-x)*.08;y+=(ty-y)*.08;const f=Math.min(2,Math.max(.7,w.clientWidth/500));
for(const l of L)l.el.style.transform='translate3d('+(-x*l.d*.6*f).toFixed(2)+'px,'+(-y*l.d*.3*f).toFixed(2)+'px,0)';
raf=vis?requestAnimationFrame(frame):0;}
w.addEventListener('pointermove',e=>{const r=w.getBoundingClientRect();hover=true;tx=((e.clientX-r.left)/r.width-.5)*2;ty=((e.clientY-r.top)/r.height-.5)*2;});
w.addEventListener('pointerleave',()=>{hover=false;t0=performance.now();});
if('IntersectionObserver' in window){new IntersectionObserver(es=>{vis=es[0].isIntersecting;if(vis&&!raf)raf=requestAnimationFrame(frame);}).observe(w);}
raf=requestAnimationFrame(frame);
}
init(document.querySelector('.jouw-container'));