Lens Zoom Nieuw

<!-- Lens Zoom · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="lnz"><div class="lnz__img" role="img" aria-label="Plattegrond begane grond, Molenstraat 8 in Gouda"></div><div class="lnz__lens" aria-hidden="true"></div><span class="lnz__hint">Beweeg over de tekening</span></div>
</div>

/* Lens Zoom · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.lnz{position:relative;width:92%;height:88%;border-radius:4px;overflow:hidden;background:#fff;border:1px solid rgba(10,10,10,.12);touch-action:none;cursor:none;font-family:'Switzer',system-ui,sans-serif}
.lnz__img{position:absolute;inset:0;background-size:100% 100%}
.lnz__lens{--s:120px;position:absolute;left:0;top:0;width:var(--s);height:var(--s);border-radius:50%;border:2px solid #F5480F;box-shadow:0 8px 24px rgba(10,10,10,.25),inset 0 0 0 4px rgba(255,255,255,.6);background-repeat:no-repeat;background-color:#fff;pointer-events:none;opacity:0;transition:opacity .2s}
.lnz.is-on .lnz__lens{opacity:1}
.lnz__hint{position:absolute;left:10px;top:10px;font:500 9px/1 'JetBrains Mono',monospace;letter-spacing:.12em;text-transform:uppercase;background:#0a0a0a;color:#fff;padding:5px 7px;border-radius:3px;transition:opacity .3s}
.lnz.is-used .lnz__hint{opacity:0}
@media(max-width:420px){.lnz__lens{--s:96px}}
@media(hover:none){.lnz{cursor:auto}}

// Lens Zoom · Bron: Magic UI · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.lnz'); if (!w) return;
    var img = w.querySelector('.lnz__img'), lens = w.querySelector('.lnz__lens'), Z = 2.6, url = '', lx = .55, ly = .33;
    function paint() {
      var c = document.createElement('canvas'), W = 1400, H = 900; c.width = W; c.height = H; var x = c.getContext('2d');
      x.fillStyle = '#fbfaf8'; x.fillRect(0, 0, W, H);
      x.strokeStyle = 'rgba(10,10,10,.05)'; x.lineWidth = 1;
      for (var g = 0; g < W; g += 25) { x.beginPath(); x.moveTo(g, 0); x.lineTo(g, H); x.stroke(); }
      for (g = 0; g < H; g += 25) { x.beginPath(); x.moveTo(0, g); x.lineTo(W, g); x.stroke(); }
      x.strokeStyle = '#0a0a0a'; x.lineWidth = 14; x.lineJoin = 'miter';
      x.strokeRect(120, 110, 1050, 640);
      x.lineWidth = 7;
      [[560, 110, 560, 430], [120, 430, 420, 430], [500, 430, 760, 430], [760, 430, 760, 750], [960, 110, 960, 330], [960, 400, 960, 430], [760, 430, 1170, 430], [380, 430, 380, 750]].forEach(function (l) { x.beginPath(); x.moveTo(l[0], l[1]); x.lineTo(l[2], l[3]); x.stroke(); });
      x.strokeStyle = '#F5480F'; x.lineWidth = 7;
      [[220, 110, 420, 110], [680, 110, 880, 110], [120, 520, 120, 660], [1170, 180, 1170, 300], [900, 750, 1080, 750]].forEach(function (l) { x.beginPath(); x.moveTo(l[0], l[1]); x.lineTo(l[2], l[3]); x.stroke(); });
      x.strokeStyle = '#0a0a0a'; x.lineWidth = 2;
      [[420, 430, 80, 0], [960, 330, 70, 1], [500, 750, 90, 2]].forEach(function (d) { x.beginPath(); if (d[3] === 0) { x.arc(d[0], d[1], d[2], 0, Math.PI / 2); } else if (d[3] === 1) { x.arc(d[0], d[1], d[2], Math.PI, Math.PI * 1.5); } else { x.arc(d[0], d[1], d[2], Math.PI, Math.PI * 1.5); } x.stroke(); });
      x.fillStyle = '#0a0a0a'; x.textAlign = 'center';
      function room(n, a, cx, cy) { x.font = "600 22px Switzer, sans-serif"; x.fillText(n, cx, cy); x.font = "500 15px 'JetBrains Mono', monospace"; x.fillStyle = 'rgba(10,10,10,.6)'; x.fillText(a, cx, cy + 24); x.fillStyle = '#0a0a0a'; }
      room('Woonkamer', '32,4 m²', 340, 270); room('Keuken', '14,8 m²', 760, 270); room('Toilet', '1,6 m²', 1065, 380); room('Hal', '6,2 m²', 250, 600); room('Berging', '5,1 m²', 570, 600); room('Werkkamer', '11,3 m²', 965, 600); room('Trap', '', 1065, 230);
      x.strokeStyle = '#0a0a0a'; x.lineWidth = 1.5; x.font = "500 14px 'JetBrains Mono', monospace";
      function dim(x1, y1, x2, y2, t) { x.beginPath(); x.moveTo(x1, y1); x.lineTo(x2, y2); x.stroke(); x.beginPath(); x.moveTo(x1, y1 - 8); x.lineTo(x1, y1 + 8); x.moveTo(x2, y2 - 8); x.lineTo(x2, y2 + 8); x.stroke(); x.fillText(t, (x1 + x2) / 2, y1 - 8); }
      dim(120, 70, 560, 70, '4.400'); dim(560, 70, 960, 70, '4.000'); dim(960, 70, 1170, 70, '2.100');
      x.save(); x.translate(1215, 430); x.rotate(Math.PI / 2); dim(-320, 0, 320, 0, '6.400'); x.restore();
      x.strokeStyle = '#0a0a0a'; x.lineWidth = 1.5; for (var s = 0; s < 8; s++) { x.strokeRect(990, 140 + s * 22, 150, 22); }
      x.fillStyle = '#0a0a0a'; x.fillRect(880, 790, 400, 80); x.fillStyle = '#fff'; x.textAlign = 'left';
      x.font = "600 18px Switzer, sans-serif"; x.fillText('Molenstraat 8 · Gouda', 900, 822);
      x.font = "500 13px 'JetBrains Mono', monospace"; x.fillText('BEGANE GROND · SCHAAL 1:100 · BLAD 2/5', 900, 850);
      x.fillStyle = '#F5480F'; x.fillRect(120, 800, 30, 30); x.fillStyle = '#0a0a0a'; x.font = "500 13px 'JetBrains Mono', monospace"; x.fillText('NIEUWE KOZIJNEN', 162, 820);
      url = 'url(' + c.toDataURL('image/png') + ')'; img.style.backgroundImage = url; lens.style.backgroundImage = url; place();
    }
    function place() {
      var W = w.clientWidth, H = w.clientHeight, s = lens.offsetWidth, r = s / 2;
      var cx = Math.max(r, Math.min(W - r, lx * W)), cy = Math.max(r, Math.min(H - r, ly * H));
      lens.style.transform = 'translate(' + (cx - r) + 'px,' + (cy - r) + 'px)';
      lens.style.backgroundSize = (W * Z) + 'px ' + (H * Z) + 'px';
      lens.style.backgroundPosition = (-(lx * W * Z - r)) + 'px ' + (-(ly * H * Z - r)) + 'px';
    }
    function mv(e) { var b = w.getBoundingClientRect(); lx = Math.max(0, Math.min(1, (e.clientX - b.left) / b.width)); ly = Math.max(0, Math.min(1, (e.clientY - b.top) / b.height)); w.classList.add('is-on', 'is-used'); place(); }
    w.addEventListener('pointermove', mv); w.addEventListener('pointerdown', mv);
    w.addEventListener('pointerleave', function (e) { if (e.pointerType === 'mouse') w.classList.remove('is-on'); });
    if ('ResizeObserver' in window) new ResizeObserver(place).observe(w);
    paint(); w.classList.add('is-on');
    if (document.fonts && document.fonts.load) Promise.all(["500 15px 'JetBrains Mono'", '600 22px Switzer'].map(function (f) { return document.fonts.load(f).catch(function () {}); })).then(paint);
}
init(document.querySelector('.jouw-container'));