Schermmockup kantelt naar plat New
An HTML-built screen starts tilted back and rotates flat towards the viewer as you scroll, useful for showing a portal or app. Scroll-driven animation (scroll-timeline + @property) with rotateX and scale; without support a small scroll script drives the same variable. With reduced motion the screen is flat from the start.
Je afspraken, altijd bij de hand
Fysio Lindenhof in Leiden plant online, de patiënt ziet direct wat er staat.
fysiolindenhof.nl/agenda
Dinsdag14 oktober2 plekken vrij
- 08.30Anouk de Wit, knie30 min
- 09.15Pieter Hoekstra, rug45 min
- 10.30Fatma Yilmaz, schouder30 min
- 11.15Jan Visser, nazorg30 min
Daarna volgen de functies en de prijzen per behandelaar.
How to use it
- Paste the HTML where the scroll effects should appear.
- Add the CSS to your stylesheet. All classes are prefixed, so nothing clashes with your own styles.
- Add the JavaScript and call init() with the element that contains the HTML.
<!-- 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'));More scroll effects
Seen something you like?
Add it to your selection and send it over. We build your site around it, in your brand.
Get in touch →