Lege winkelwagen die rondrijdt Nieuw

<!-- Lege winkelwagen die rondrijdt · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie -->
<div class="jouw-container">
<div class="k7w">
  <button class="k7w__scene" type="button" aria-label="Karretje nog eens laten rijden">
    <span class="k7w__cart"><svg viewBox="0 0 100 80" aria-hidden="true"><path d="M3 12h11l4 12" fill="none" stroke="#0a0a0a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><path d="M18 24h72l-9 32H27z" fill="#fff" stroke="#0a0a0a" stroke-width="3" stroke-linejoin="round"/><path d="M36 28v24M50 28v24M64 28v24M24 40h62" stroke="#c9c4bc" stroke-width="1.6"/><path d="M27 56l-2 6h55" fill="none" stroke="#0a0a0a" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/><g class="k7w__wh"><circle cx="32" cy="70" r="6" fill="#fff" stroke="#0a0a0a" stroke-width="3"/><path d="M32 66v8" stroke="#F5480F" stroke-width="2"/></g><g class="k7w__wh"><circle cx="74" cy="70" r="6" fill="#fff" stroke="#0a0a0a" stroke-width="3"/><path d="M74 66v8" stroke="#F5480F" stroke-width="2"/></g></svg></span>
    <span class="k7w__bon" aria-hidden="true">€ 0,00</span>
  </button>
  <div class="k7w__txt">
    <p class="k7w__h">Je winkelwagen is nog leeg</p>
    <p class="k7w__p">Voor 22:00 besteld is morgen in huis. Boven € 35 versturen we gratis.</p>
    <a class="k7w__cta" href="/">Naar de winkel</a>
  </div>
</div>
</div>

/* Lege winkelwagen die rondrijdt · © 2026 NedDev BV · NedDev Lab-licentie (gratis gebruik, niet doorverkopen) · neddev.com/nl/lab/gebruik/#licentie */
.k7w{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;box-sizing:border-box;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a;text-align:left;gap:12px;padding:12px 14px}
.k7w *{box-sizing:border-box}
.k7w__scene{position:relative;flex:none;width:136px;height:118px;padding:0;border:0;border-bottom:1px solid rgba(10,10,10,.18);border-radius:0;background:none;cursor:pointer;overflow:hidden}
.k7w__scene:focus-visible{outline:2px solid #F5480F;outline-offset:2px}
.k7w__cart{position:absolute;left:4px;bottom:0;width:100px;height:80px;transform-origin:74% 96%}
.k7w__cart svg{display:block;width:100px;height:80px}
.k7w__wh{transform-box:fill-box;transform-origin:center}
.k7w__bon{position:absolute;left:60px;top:46px;width:48px;padding:4px 0 8px;background:#fff;border:1px solid #0a0a0a;font-size:12px;font-weight:600;line-height:1.2;text-align:center;color:#0a0a0a;clip-path:polygon(0 0,100% 0,100% 100%,88% 88%,75% 100%,63% 88%,50% 100%,38% 88%,25% 100%,13% 88%,0 100%);opacity:0}
.k7w__txt{flex:1;min-width:0;max-width:210px}
.k7w__h{margin:0 0 4px;font-size:15px;font-weight:700;line-height:1.25}
.k7w__p{margin:0 0 12px;font-size:13px;line-height:1.45;color:#3d3d3d}
.k7w__cta{display:inline-flex;white-space:nowrap;align-items:center;height:34px;padding:0 12px;border-radius:4px;background:#0a0a0a;color:#fff;font-size:13px;font-weight:600;text-decoration:none;transition:background-color .15s}
.k7w__cta:hover{background:#333}
.k7w__cta:focus-visible{outline:2px solid #F5480F;outline-offset:2px}

// Lege winkelwagen die rondrijdt · © 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){
var w = root.querySelector('.k7w'); if (!w) return;
    var scene = w.querySelector('.k7w__scene'), cart = w.querySelector('.k7w__cart'), whs = w.querySelectorAll('.k7w__wh'), bon = w.querySelector('.k7w__bon'), cta = w.querySelector('.k7w__cta');
    var rm = matchMedia('(prefers-reduced-motion: reduce)').matches, anims = [], played = false;
    var END = 'translate(22px,44px) rotate(6deg)';
    function still() { bon.style.opacity = '1'; bon.style.transform = END; }
    function play() {
      if (!cart.animate) { still(); return; }
      anims.forEach(function (a) { a.cancel(); }); anims = [];
      if (rm) { still(); return; }
      bon.style.opacity = ''; bon.style.transform = '';
      anims.push(cart.animate([
        { transform: 'translateX(-150px)', offset: 0 },
        { transform: 'translateX(4px)', offset: .33, easing: 'ease-out' },
        { transform: 'translateX(0) rotate(-4deg)', offset: .41 },
        { transform: 'translateX(0) rotate(0)', offset: .48 },
        { transform: 'translateX(0) rotate(16deg)', offset: .58, easing: 'ease-in-out' },
        { transform: 'translateX(0) rotate(16deg)', offset: .8 },
        { transform: 'translateX(0) rotate(0)', offset: 1, easing: 'cubic-bezier(.3,1.5,.5,1)' }
      ], { duration: 2700, fill: 'both' }));
      whs.forEach(function (g) {
        anims.push(g.animate([{ transform: 'rotate(-720deg)' }, { transform: 'rotate(0)' }], { duration: 900, easing: 'ease-out', fill: 'both' }));
      });
      anims.push(bon.animate([
        { opacity: 0, transform: 'translate(0,0) rotate(0)' },
        { opacity: 1, transform: 'translate(18px,-26px) rotate(-12deg)', offset: .2 },
        { opacity: 1, transform: 'translate(26px,6px) rotate(14deg)', offset: .45 },
        { opacity: 1, transform: 'translate(20px,30px) rotate(-8deg)', offset: .7 },
        { opacity: 1, transform: END }
      ], { duration: 1500, delay: 1500, easing: 'ease-in-out', fill: 'both' }));
    }
    scene.addEventListener('click', play);
    cta.addEventListener('click', function (e) { e.preventDefault(); });
    if (rm) { still(); return; }
    if ('IntersectionObserver' in window) {
      cart.style.transform = 'translateX(-150px)';
      var io = new IntersectionObserver(function (es) { es.forEach(function (e) { if (e.isIntersecting && !played) { played = true; cart.style.transform = ''; play(); io.disconnect(); } }); }, { threshold: .5 });
      io.observe(w);
    } else { play(); }
}
init(document.querySelector('.jouw-container'));