(function () { var w = window, d = document; if (w.__mdosParallax || !w.IntersectionObserver || !w.MutationObserver) return; w.__mdosParallax = true; if (w.matchMedia && w.matchMedia('(prefers-reduced-motion: reduce)').matches) return; var visible = []; var raf = 0; function num(el, name, fallback) { var v = parseFloat(el.getAttribute(name)); return isFinite(v) && v > 0 ? v : fallback; } function fillImages(root) { var all = root.getElementsByTagName('img'), out = [], best = null, bestArea = 0; for (var i = 0; i < all.length; i++) { var img = all[i], parent = img.parentElement; if (!parent) continue; var cs = w.getComputedStyle(img); var pw = parent.getBoundingClientRect().width; var r = img.getBoundingClientRect(); if (cs.position === 'absolute' && pw > 0 && r.width >= pw * 0.9) out.push(img); if (r.width * r.height > bestArea) { bestArea = r.width * r.height; best = img; } } if (!out.length && best) out.push(best); return out; } function decoded(s) { try { return decodeURIComponent(s); } catch (e) { return s; } } // The element painting EXACTLY this image as its CSS background. function bgHost(root, src) { var cands = [root].concat(Array.prototype.slice.call(root.querySelectorAll('[style*="background"]'))); for (var i = 0; i < cands.length; i++) { var bg = w.getComputedStyle(cands[i]).backgroundImage; if (bg && bg.indexOf('url(') >= 0 && decoded(bg).indexOf(src) >= 0) return cands[i]; } return null; } // A renderer that paints its backdrop as an of that same source. function imgOf(root, src) { var all = root.getElementsByTagName('img'); for (var i = 0; i < all.length; i++) { if (decoded(all[i].currentSrc || all[i].src || '').indexOf(src) >= 0) return [all[i]]; } return []; } // CH-MDOS-59 marked a section done on its FIRST scan even when nothing was // found. Full Width Image bails out to client rendering (the server sends // an empty placeholder), so at DOMContentLoaded it has no yet — it was // marked, never looked at again, and never moved (CH-MDOS-64). Now only a // section that found its layer is done; an empty one is retried when // content is rendered into it or an image inside it loads, up to a cap. function arm(wrap) { if (wrap.__mdosParallax) return; wrap.__mdosTries = (wrap.__mdosTries || 0) + 1; if (wrap.__mdosTries > 40) return; var effect = wrap.getAttribute('data-mdos-parallax'); var layers = []; var isBg = wrap.getAttribute('data-mdos-parallax-target') === 'bg'; var src = wrap.getAttribute('data-mdos-parallax-src') || ''; if (isBg && !src) return; // Match on the file name: a renderer may rewrite the host or route the // URL through /_next/image (encoded). Library uploads carry a unique // timestamp prefix, so the name alone is specific. var file = src.split('?')[0].split('#')[0].split('/').pop() || ''; if (file.length >= 8) src = decoded(file); var host = isBg ? bgHost(wrap, src) : null; if (host) { if (effect === 'fixed') { host.setAttribute('data-mdos-parallax-host', 'fixed'); wrap.__mdosParallax = 1; return; // pure CSS: background-attachment: fixed } var cs = w.getComputedStyle(host); host.style.setProperty('--mdos-px-bg', cs.backgroundImage); host.style.setProperty('--mdos-px-bg-size', cs.backgroundSize); host.style.setProperty('--mdos-px-bg-pos', cs.backgroundPosition); host.style.setProperty('--mdos-px-bg-repeat', cs.backgroundRepeat); host.setAttribute('data-mdos-parallax-host', effect); layers.push({ el: host, ref: host }); } else { var imgs = isBg ? imgOf(wrap, src) : fillImages(wrap); for (var i = 0; i < imgs.length; i++) { var ref = imgs[i].parentElement; ref.setAttribute('data-mdos-parallax-clip', ''); imgs[i].setAttribute('data-mdos-parallax-layer', effect); layers.push({ el: imgs[i], ref: ref }); } } if (!layers.length) return; wrap.__mdosParallax = 1; wrap.__mdosLayers = layers; io.observe(wrap); } function update(wrap) { var effect = wrap.getAttribute('data-mdos-parallax'); var speed = num(wrap, 'data-mdos-parallax-speed', 0.3); var zoom = num(wrap, 'data-mdos-parallax-zoom', 1.2); var dir = wrap.getAttribute('data-mdos-parallax-direction') === 'right' ? 1 : -1; var vh = w.innerHeight || d.documentElement.clientHeight; var layers = wrap.__mdosLayers || []; for (var i = 0; i < layers.length; i++) { var r = layers[i].ref.getBoundingClientRect(); var p = (vh - r.top) / (vh + r.height); p = p < 0 ? 0 : p > 1 ? 1 : p; var c = p - 0.5, x = 0, y = 0, s = 1; if (effect === 'speed') { y = c * r.height * speed; s = 1 + speed + 0.02; } else if (effect === 'horizontal') { x = c * r.width * speed * dir; s = 1 + speed + 0.02; } else if (effect === 'zoom') { s = 1 + (zoom - 1) * p; } else if (effect === 'fixed') { y = -r.top; } var st = layers[i].el.style; st.setProperty('--mdos-px-x', x.toFixed(2) + 'px'); st.setProperty('--mdos-px-y', y.toFixed(2) + 'px'); st.setProperty('--mdos-px-s', s.toFixed(4)); } } function frame() { raf = 0; for (var i = 0; i < visible.length; i++) update(visible[i]); } function schedule() { if (!raf && visible.length) raf = w.requestAnimationFrame(frame); } var io = new w.IntersectionObserver(function (entries) { for (var i = 0; i < entries.length; i++) { var el = entries[i].target, at = visible.indexOf(el); if (entries[i].isIntersecting && at < 0) visible.push(el); else if (!entries[i].isIntersecting && at >= 0) visible.splice(at, 1); update(el); } }, { rootMargin: '100px 0px 100px 0px', threshold: 0 }); w.addEventListener('scroll', schedule, { passive: true }); w.addEventListener('resize', schedule); function scan(node) { if (!node || node.nodeType !== 1) return; // Content rendered INTO an existing section (client rendering): arm // the section around it, not just sections inside it. var up = node.parentElement && node.parentElement.closest ? node.parentElement.closest('[data-mdos-parallax]') : null; if (up) arm(up); if (node.hasAttribute('data-mdos-parallax')) arm(node); if (!node.firstElementChild) return; var found = node.querySelectorAll('[data-mdos-parallax]'); for (var i = 0; i < found.length; i++) arm(found[i]); } function start() { new w.MutationObserver(function (records) { for (var r = 0; r < records.length; r++) { var added = records[r].addedNodes; for (var n = 0; n < added.length; n++) scan(added[n]); } }).observe(d.documentElement, { childList: true, subtree: true }); // An image with no size until it loads (no fixed height) measures 0 // when first scanned; try its section again once it has loaded. d.addEventListener('load', function (e) { var t = e.target; if (t && t.tagName === 'IMG' && t.closest) { var wrap = t.closest('[data-mdos-parallax]'); if (wrap) arm(wrap); } }, true); scan(d.documentElement); } // Arming measures layout (fill images, computed backgrounds), so it runs // once the document is parsed, not per parser insertion. Until then the // sections simply render normally — nothing is hidden, so nothing flashes. if (d.readyState === 'loading') d.addEventListener('DOMContentLoaded', start); else start(); })();

Demo Site