Swipe Card Deck

<!-- Swipe Card Deck · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="scd-deck"><div class="scd-card"><b>Den Haag</b><span>&starf; 4.9</span></div><div class="scd-card"><b>Rotterdam</b><span>&starf; 4.7</span></div><div class="scd-card"><b>Utrecht</b><span>&starf; 4.8</span></div><div class="scd-card"><b>Amsterdam</b><span>&starf; 5.0</span></div><div class="scd-hint">sleep &harr;</div></div>
</div>

/* Swipe Card Deck · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.scd-deck{position:relative;width:200px;height:260px;font-family:'Switzer',system-ui,sans-serif}
.scd-card{position:absolute;inset:0;border-radius:18px;background:#fff;border:1px solid rgba(10,10,10,.12);box-shadow:0 10px 30px rgba(10,10,10,.10);display:flex;flex-direction:column;justify-content:flex-end;padding:20px;cursor:grab;will-change:transform;transition:transform .45s cubic-bezier(.22,1,.36,1)}
.scd-card b{font-size:22px;color:#0a0a0a;letter-spacing:-.01em}.scd-card span{font-size:13px;color:#F5480F;font-weight:600;margin-top:4px}
.scd-card::before{content:'';position:absolute;top:18px;left:18px;width:38px;height:38px;border-radius:10px;background:linear-gradient(135deg,#F5480F,#0a0a0a)}
.scd-card.is-drag{transition:none;cursor:grabbing}
.scd-hint{position:absolute;bottom:-26px;left:0;right:0;text-align:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(10,10,10,.4)}

// Swipe Card Deck · Bron: Codrops · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
root=root.querySelector('.scd-deck')||root;var cards=[].slice.call(root.querySelectorAll('.scd-card'));var reduce=matchMedia('(prefers-reduced-motion:reduce)').matches;function layout(){cards.forEach(function(c,i){var d=cards.length-1-i;c.style.zIndex=i;c.style.transform='translateY('+(d*-8)+'px) scale('+(1-d*.04)+')';c.style.opacity=d>3?'0':'1';});}layout();
function bindTop(){var top=cards[cards.length-1];if(!top)return;var sx=0,dx=0,dragging=false;function down(e){dragging=true;sx=(e.touches?e.touches[0].clientX:e.clientX);top.classList.add('is-drag');window.addEventListener('mousemove',move);window.addEventListener('mouseup',up);window.addEventListener('touchmove',move,{passive:true});window.addEventListener('touchend',up);}function move(e){if(!dragging)return;var x=(e.touches?e.touches[0].clientX:e.clientX);dx=x-sx;top.style.transform='translateX('+dx+'px) rotate('+(dx*.06)+'deg)';}function up(){if(!dragging)return;dragging=false;top.classList.remove('is-drag');window.removeEventListener('mousemove',move);window.removeEventListener('mouseup',up);window.removeEventListener('touchmove',move);window.removeEventListener('touchend',up);if(Math.abs(dx)>80&&!reduce){var dir=dx>0?1:-1;top.style.transform='translateX('+(dir*420)+'px) rotate('+(dir*22)+'deg)';top.style.opacity='0';setTimeout(function(){cards.pop();cards.unshift(top);top.style.transition='none';top.style.opacity='';top.style.transform='translateY(-24px) scale(.88)';requestAnimationFrame(function(){top.style.transition='';layout();bindTop();});},360);}else{layout();}}top.addEventListener('mousedown',down);top.addEventListener('touchstart',down,{passive:true});}bindTop();
}
init(document.querySelector('.jouw-container'));