Schermmockup kantelt naar plat Nieuw

<!-- Schermmockup kantelt naar plat · NedDev · eigen werk. -->
<div class="jouw-container">
<div class="mkp">
<div class="mkp__sc" tabindex="0" aria-label="Voorbeeld: online agenda van een fysiotherapiepraktijk, scroll om het scherm plat te zetten">
<div class="mkp__track"><div class="mkp__pin">
<div class="mkp__intro"><h3 class="mkp__h">Je afspraken, altijd bij de hand</h3><p class="mkp__p">Fysio Lindenhof in Leiden plant online, de patiënt ziet direct wat er staat.</p></div>
<div class="mkp__dev"><div class="mkp__win" role="img" aria-label="Scherm van de online agenda met vier afspraken op dinsdag 14 oktober">
<div class="mkp__top"><i></i><i></i><i></i><span class="mkp__url">fysiolindenhof.nl/agenda</span></div>
<div class="mkp__body">
<div class="mkp__side"><b>Dinsdag</b><span>14 oktober</span><span class="mkp__free">2 plekken vrij</span></div>
<ul class="mkp__list">
<li><b>08.30</b><span>Anouk de Wit, knie</span><em>30 min</em></li>
<li class="is-now"><b>09.15</b><span>Pieter Hoekstra, rug</span><em>45 min</em></li>
<li><b>10.30</b><span>Fatma Yilmaz, schouder</span><em>30 min</em></li>
<li><b>11.15</b><span>Jan Visser, nazorg</span><em>30 min</em></li>
</ul></div></div></div>
</div></div>
<div class="mkp__na"><p>Daarna volgen de functies en de prijzen per behandelaar.</p></div>
</div>
</div>
</div>

/* Schermmockup kantelt naar plat · NedDev · eigen werk. */
@property --mkp-p{syntax:'<number>';inherits:true;initial-value:0}
.mkp{position:absolute;inset:0;background:#f4f3f1;color:#0a0a0a;font-family:'Switzer',sans-serif;container-type:size;text-align:left}
.mkp__sc{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scroll-timeline:--mkp-tl y}
.mkp__sc:focus-visible{outline:2px solid #F5480F;outline-offset:-2px}
.mkp__track{height:240cqh;position:relative}
.mkp__pin{position:sticky;top:0;height:100cqh;overflow:hidden;--mkp-p:0;perspective:900px}
@supports (animation-timeline: scroll()){.mkp__pin{animation:mkp-plat linear both;animation-timeline:--mkp-tl;animation-range:0% 58%}}
@keyframes mkp-plat{to{--mkp-p:1}}
.mkp__intro{position:absolute;left:16px;right:16px;top:12px;text-align:center;opacity:calc(1 - var(--mkp-p)*1.6)}
.mkp__h{margin:0;font:700 clamp(16px,5cqi,30px)/1.08 'Switzer',sans-serif;letter-spacing:-.02em}
.mkp__p{margin:4px auto 0;font:400 clamp(11px,2.9cqi,15px)/1.4 'Switzer',sans-serif;color:#4a4845;max-width:30em}
.mkp__dev{position:absolute;left:50%;top:calc(30cqh - var(--mkp-p)*24cqh);width:min(84cqi,140cqh);transform-origin:50% 0;transform:translateX(-50%) rotateX(calc((1 - var(--mkp-p))*34deg)) scale(calc(.84 + .16*var(--mkp-p)))}
.mkp__win{background:#fff;border:1px solid #0a0a0a;border-radius:4px;overflow:hidden;container-type:inline-size}
.mkp__top{display:flex;align-items:center;gap:1.2cqi;padding:1.8cqi 2.4cqi;border-bottom:1px solid #e4e2de;background:#f4f3f1}
.mkp__top i{width:1.8cqi;height:1.8cqi;border-radius:50%;background:#cfccc7}
.mkp__url{margin-left:2cqi;flex:1;padding:.8cqi 2cqi;background:#fff;border:1px solid #e4e2de;border-radius:4px;font:400 2.6cqi/1.2 'Switzer',sans-serif;color:#5c5a57}
.mkp__body{display:flex;gap:3cqi;padding:3cqi}
.mkp__side{flex:0 0 26%;display:flex;flex-direction:column;gap:.8cqi;font:400 2.8cqi/1.3 'Switzer',sans-serif;color:#5c5a57}
.mkp__side b{font:700 4.4cqi/1.1 'Switzer',sans-serif;color:#0a0a0a;letter-spacing:-.02em}
.mkp__free{margin-top:1.6cqi;color:#17663a;font-weight:600}
.mkp__list{flex:1;list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mkp__list li{display:flex;align-items:baseline;gap:2.4cqi;padding:1.8cqi 0;border-bottom:1px solid #e4e2de;font:400 3cqi/1.3 'Switzer',sans-serif}
.mkp__list li:last-child{border-bottom:0}
.mkp__list b{font-weight:600;font-variant-numeric:tabular-nums}
.mkp__list span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mkp__list em{font-style:normal;color:#5c5a57}
.mkp__list li.is-now{background:#fff1eb;margin:0 -1.6cqi;padding-left:1.6cqi;padding-right:1.6cqi;border-radius:4px}
.mkp__list li.is-now b{color:#b8330a}
.mkp__na{padding:18px 16px 28px;font:400 14px/1.5 'Switzer',sans-serif;color:#4a4845}
.mkp__na p{margin:0}
@media (prefers-reduced-motion:reduce){.mkp__pin{animation:none!important;--mkp-p:1}.mkp__intro{display:none}}

// Schermmockup kantelt naar plat · NedDev · eigen werk.
// root = het element waarin de HTML staat
function init(root){
var w=root.querySelector('.mkp');if(!w)return;
var sc=w.querySelector('.mkp__sc'),pin=w.querySelector('.mkp__pin'),tr=w.querySelector('.mkp__track');
if(matchMedia('(prefers-reduced-motion: reduce)').matches)return;
if(!(window.CSS&&CSS.supports&&CSS.supports('animation-timeline: scroll()'))){var tick=false;
function upd(){tick=false;var max=sc.scrollHeight-sc.clientHeight;var p=max>0?Math.min(1,sc.scrollTop/(max*.58)):0;pin.style.setProperty('--mkp-p',p.toFixed(4));}
sc.addEventListener('scroll',function(){if(!tick){tick=true;requestAnimationFrame(upd);}},{passive:true});upd();}
var on=true,t0=0;['wheel','touchstart','pointerdown','keydown','focusin'].forEach(function(ev){w.addEventListener(ev,function(){on=false;},{passive:true});});
function drift(now){if(!on)return;if(!t0)t0=now;var m=tr.offsetHeight-sc.clientHeight;sc.scrollTop=m*(.5-.5*Math.cos((now-t0)/1000*.4));requestAnimationFrame(drift);}
setTimeout(function(){if(on)requestAnimationFrame(drift);},900);
}
init(document.querySelector('.jouw-container'));