Parallax Slider

<!--
  Ported to plain HTML/CSS/JS for OwnlyPlans from ObsidianUI (https://github.com/Atharvsinh-codez/ObsidianUI)
  MIT License — Copyright (c) 2026 ObsidianUI
  Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
  documentation files (the "Software"), to deal in the Software without restriction, including without limitation
  the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
  permit persons to whom the Software is furnished to do so, subject to the following conditions:
  The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED.
-->
<section class="op-parallax-slider" data-orientation="portrait" data-moving="false">
  <div class="op-ps-inner">
    <div class="op-ps-viewport" role="group" aria-roledescription="carousel" aria-label="Gallery. Drag, scroll, or use the arrow keys to browse." tabindex="0">
      <div class="op-ps-track"></div>
    </div>
  </div>
</section>

/* Ported from ObsidianUI (MIT License, Copyright (c) 2026 ObsidianUI) */
.op-parallax-slider{--muted:color-mix(in oklab,currentColor 55%,transparent);--caption:color-mix(in oklab,currentColor 72%,transparent);--frame:color-mix(in oklab,currentColor 6%,transparent);--w:270px;--h:480px;--gap:20px;--edge:4rem;--space:clamp(2.5rem,7cqi,6rem);--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;container-type:inline-size;position:relative;width:100%;overflow:hidden;background:#0a0a0a;color:#fafafa;font-family:Inter,system-ui,sans-serif}
.op-ps-inner{padding-block:var(--space) calc(var(--space) - 1.5rem)}
.op-ps-viewport{position:relative;height:calc(var(--h) + 3rem);overflow:hidden;overflow:clip;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--edge),#000 calc(100% - var(--edge)),transparent);mask-image:linear-gradient(90deg,transparent,#000 var(--edge),#000 calc(100% - var(--edge)),transparent)}
.op-parallax-slider[data-dragging="true"] .op-ps-viewport{cursor:grabbing}
.op-ps-viewport:focus-visible{-webkit-mask-image:none;mask-image:none;box-shadow:inset 0 0 0 2px var(--caption)}
.op-ps-track{display:flex;width:max-content;height:100%;gap:var(--gap);padding-inline-start:calc(var(--gap) / 2);will-change:transform}
.op-ps-slide{position:relative;flex:none;width:var(--w);height:var(--h)}
.op-ps-frame{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:10px;background:var(--frame)}
.op-ps-image{position:absolute;top:0;left:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;pointer-events:none;user-select:none;will-change:transform}
.op-ps-caption{position:absolute;top:calc(100% + .75rem);right:0;left:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;font-family:var(--mono);font-size:.7rem;line-height:1.4;text-transform:uppercase;color:var(--caption);opacity:0;pointer-events:none;transition:opacity .3s ease}
.op-ps-caption svg{flex:none;width:14px;height:14px}
.op-ps-slide:hover .op-ps-caption{opacity:1}
@media (hover:none){.op-ps-caption{opacity:1}}
.op-parallax-slider[data-moving="true"] .op-ps-caption{opacity:0}
@container (max-width:720px){.op-ps-viewport{--w:200px;--h:356px;--gap:14px;--edge:1.5rem}}
@media (prefers-reduced-motion:reduce){.op-ps-caption{transition:none}}

(function(){
var SLIDES=[{"title":"Missing Piece","image":"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20540%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23f3d9e4%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23d38fb1%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22540%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%22304%22%20cy%3D%22267%22%20r%3D%2254%22%20fill%3D%22%23fff%22%20opacity%3D%22.85%22/%3E%3Cpolygon%20points%3D%220%2C900%200%2C566%2090%2C450%20180%2C519%20270%2C436%20360%2C532%20450%2C444%20540%2C524%20540%2C900%22%20fill%3D%22%23d38fb1%22/%3E%3Cpolygon%20points%3D%220%2C900%200%2C640%2090%2C645%20180%2C604%20270%2C658%20360%2C673%20450%2C563%20540%2C614%20540%2C900%22%20fill%3D%22%238a5a9e%22/%3E%3Cpolygon%20points%3D%220%2C900%200%2C779%2090%2C759%20180%2C732%20270%2C720%20360%2C778%20450%2C700%20540%2C761%20540%2C900%22%20fill%3D%22%233a2b55%22/%3E%3C/svg%3E"},{"title":"Enter","image":"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20540%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23fde9c8%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23f2b05e%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22540%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%22114%22%20cy%3D%22221%22%20r%3D%2273%22%20fill%3D%22%23fff%22%20opacity%3D%22.85%22/%3E%3Cpolygon%20points%3D%220%2C900%200%2C443%2090%2C429%20180%2C559%20270%2C500%20360%2C525%20450%2C443%20540%2C564%20540%2C900%22%20fill%3D%22%23f2b05e%22/%3E%3Cpolygon%20points%3D%220%2C900%200%2C553%2090%2C556%20180%2C578%20270%2C641%20360%2C615%20450%2C574%20540%2C623%20540%2C900%22%20fill%3D%22%23c4573b%22/%3E%3Cpolygon%20points%3D%220%2C900%200%2C703%2090%2C762%20180%2C772%20270%2C723%20360%2C711%20450%2C728%20540%2C746%20540%2C900%22%20fill%3D%22%234a2230%22/%3E%3C/svg%3E"},{"title":"Opening Move","image":"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20540%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23dde7f0%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%239fb3c8%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22540%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%22323%22%20cy%3D%22216%22%20r%3D%2272%22%20fill%3D%22%23fff%22%20opacity%3D%22.85%22/%3E%3Cpolygon%20points%3D%220%2C900%200%2C432%2090%2C523%20180%2C476%20270%2C510%20360%2C447%20450%2C472%20540%2C461%20540%2C900%22%20fill%3D%22%239fb3c8%22/%3E%3Cpolygon%20points%3D%220%2C900%200%2C590%2090%2C640%20180%2C608%20270%2C670%20360%2C622%20450%2C577%20540%2C626%20540%2C900%22%20fill%3D%22%235d7493%22/%3E%3Cpolygon%20points%3D%220%2C900%200%2C740%2090%2C705%20180%2C740%20270%2C694%20360%2C726%20450%2C741%20540%2C754%20540%2C900%22%20fill%3D%22%23222e42%22/%3E%3C/svg%3E"},{"title":"Hand Off","image":"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20540%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23e6f0dc%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%239cc28c%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22540%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%22247%22%20cy%3D%22214%22%20r%3D%2256%22%20fill%3D%22%23fff%22%20opacity%3D%22.85%22/%3E%3Cpolygon%20points%3D%220%2C900%200%2C466%2090%2C426%20180%2C492%20270%2C439%20360%2C539%20450%2C560%20540%2C546%20540%2C900%22%20fill%3D%22%239cc28c%22/%3E%3Cpolygon%20points%3D%220%2C900%200%2C630%2090%2C662%20180%2C557%20270%2C583%20360%2C661%20450%2C568%20540%2C674%20540%2C900%22%20fill%3D%22%234f8a63%22/%3E%3Cpolygon%20points%3D%220%2C900%200%2C761%2090%2C731%20180%2C748%20270%2C705%20360%2C698%20450%2C695%20540%2C721%20540%2C900%22%20fill%3D%22%231f3b30%22/%3E%3C/svg%3E"},{"title":"Fine Tune","image":"data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20540%20900%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23f0e1d2%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23c79a84%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22540%22%20height%3D%22900%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%22245%22%20cy%3D%22168%22%20r%3D%2272%22%20fill%3D%22%23fff%22%20opacity%3D%22.85%22/%3E%3Cpolygon%20points%3D%220%2C900%200%2C492%2090%2C558%20180%2C481%20270%2C555%20360%2C445%20450%2C566%20540%2C482%20540%2C900%22%20fill%3D%22%23c79a84%22/%3E%3Cpolygon%20points%3D%220%2C900%200%2C572%2090%2C592%20180%2C628%20270%2C553%20360%2C597%20450%2C550%20540%2C557%20540%2C900%22%20fill%3D%22%238a6273%22/%3E%3Cpolygon%20points%3D%220%2C900%200%2C708%2090%2C713%20180%2C717%20270%2C763%20360%2C730%20450%2C770%20540%2C773%20540%2C900%22%20fill%3D%22%2333263a%22/%3E%3C/svg%3E"}];
var LERP=.05,WHEEL_SPEED=1.75,MAX_WHEEL_STEP=150,MOUSE_DRAG=2,TOUCH_DRAG=1.5,DRAG_THRESHOLD=5,SETTLE_MS=200,LEAD=2,MIN_COPIES=6,PARALLAX=.2,SCALE=1;
var ARROW='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M7 7h10v10"/><path d="M7 17 17 7"/></svg>';
document.querySelectorAll('.op-parallax-slider').forEach(function(root){
  var viewport=root.querySelector('.op-ps-viewport'),track=root.querySelector('.op-ps-track'),count=SLIDES.length,copies=MIN_COPIES;
  function build(n){track.innerHTML='';for(var c=0;c<n;c++)SLIDES.forEach(function(s,i){var readable=c===LEAD;var d=document.createElement('div');d.className='op-ps-slide';d.setAttribute('data-parallax-slide','');
    if(readable){d.setAttribute('role','group');d.setAttribute('aria-roledescription','slide');d.setAttribute('aria-label',(i+1)+' of '+count+': '+s.title)}else d.setAttribute('aria-hidden','true');
    d.innerHTML='<span class="op-ps-frame"><img class="op-ps-image" data-parallax-image draggable="false" alt=""></span><span class="op-ps-caption"><span></span>'+ARROW+'</span>';
    var img=d.querySelector('img');img.src=s.image;img.alt=readable?s.title:'';d.querySelector('.op-ps-caption span').textContent=s.title;track.appendChild(d)})}
  build(copies);
  var els,images,room;
  var st={current:0,target:0,width:0,sw:0,sh:0,offset:0,pitch:0,seq:0,lastInput:0,moving:false,frame:0,pointer:null,px:0,dist:0,dragged:false,reduce:matchMedia('(prefers-reduced-motion: reduce)').matches};
  var startPos=-count*LEAD,releaseTimer=0;
  function collect(){els=[].slice.call(track.children);images=els.map(function(s){return s.querySelector('img')});room=images.map(function(){return{left:0,right:0}});images.forEach(function(im,i){im.addEventListener('load',function(){fit(i)})})}
  collect();
  function setMoving(m){if(m===st.moving)return;st.moving=m;root.dataset.moving=String(m)}
  function wrap(){if(!st.seq)return;while(st.current>-st.seq){st.current-=st.seq;st.target-=st.seq}while(st.current<-st.seq*4){st.current+=st.seq;st.target+=st.seq}}
  function paintImage(i){var im=images[i];if(!im)return;var d=st.current+st.offset+i*st.pitch+st.sw/2-st.width/2;if(Math.abs(d)>st.width/2+st.sw+500)return;var drift=st.reduce?0:d*-PARALLAX;var sh=Math.max(-room[i].right,Math.min(room[i].left,drift));im.style.transform='translate3d('+sh+'px,0,0)'}
  function paint(){track.style.transform='translate3d('+st.current+'px,0,0)';for(var i=0;i<images.length;i++)paintImage(i)}
  function fit(i){var im=images[i];if(!im||!im.naturalWidth||!st.sw||!st.sh)return;var fw=st.sw,fh=st.sh,r=im.naturalWidth/im.naturalHeight,w=Math.max(fw,fh*r)*SCALE,h=Math.max(fh,fw/r)*SCALE,fx=.5,fy=.5;
    im.style.width=w+'px';im.style.height=h+'px';im.style.left=(fw-w)*fx+'px';im.style.top=(fh-h)*fy+'px';room[i]={left:(w-fw)*fx,right:(w-fw)*(1-fx)};paintImage(i)}
  function step(){st.frame=0;var delta=(st.target-st.current)*(st.reduce?1:LERP);st.current=Math.abs(st.target-st.current-delta)<.05?st.target:st.current+delta;wrap();var recent=performance.now()-st.lastInput<SETTLE_MS;setMoving(st.dragged||Math.abs(delta)>=.1||recent);paint();
    if(st.current!==st.target||recent||st.dragged||st.pointer!==null)st.frame=requestAnimationFrame(step);else setMoving(false)}
  function tick(){if(!st.frame)st.frame=requestAnimationFrame(step)}
  function nudge(a){st.target+=a;st.lastInput=performance.now();tick()}
  function measure(){var prev=st.pitch;st.width=viewport.clientWidth;st.sw=els[0].offsetWidth;st.sh=els[0].offsetHeight;st.offset=els[0].offsetLeft;st.pitch=els.length>1?els[1].offsetLeft-els[0].offsetLeft:st.sw;st.seq=st.pitch*count;if(!st.seq)return;
    if(prev){st.current*=st.pitch/prev;st.target*=st.pitch/prev}else{st.current=st.target=startPos*st.pitch}
    var needed=Math.max(MIN_COPIES,5+Math.ceil(st.width/st.seq));if(needed>copies){var pos=st.current/st.pitch;copies=needed;build(copies);collect();st.pitch=0;startPos=pos;return measure()}
    wrap();paint();images.forEach(function(_,i){fit(i)})}
  new ResizeObserver(measure).observe(viewport);
  viewport.addEventListener('wheel',function(e){var hz=Math.abs(e.deltaX)>Math.abs(e.deltaY),unit=e.deltaMode===1?16:e.deltaMode===2?st.width:1,d=(hz?e.deltaX:e.deltaY)*unit;if(!d)return;e.preventDefault();nudge(-Math.max(-MAX_WHEEL_STEP,Math.min(MAX_WHEEL_STEP,d*WHEEL_SPEED)))},{passive:false});
  viewport.addEventListener('pointerdown',function(e){if(e.button!==0||st.pointer!==null)return;clearTimeout(releaseTimer);st.pointer=e.pointerId;st.px=e.clientX;st.dist=0;st.dragged=false;st.lastInput=performance.now()});
  addEventListener('pointermove',function(e){if(e.pointerId!==st.pointer)return;var d=(e.clientX-st.px)*(e.pointerType==='mouse'?MOUSE_DRAG:TOUCH_DRAG);st.px=e.clientX;st.dist+=Math.abs(d);if(!st.dragged&&st.dist>DRAG_THRESHOLD){st.dragged=true;root.dataset.dragging='true'}nudge(d)});
  function up(e){if(e.pointerId!==st.pointer)return;st.pointer=null;root.dataset.dragging='false';if(!st.dragged)return;releaseTimer=setTimeout(function(){st.dragged=false;tick()},100)}
  addEventListener('pointerup',up);addEventListener('pointercancel',up);
  viewport.addEventListener('click',function(e){if(!st.dragged)return;e.preventDefault();e.stopPropagation()},true);
  viewport.addEventListener('keydown',function(e){if(e.key!=='ArrowLeft'&&e.key!=='ArrowRight')return;e.preventDefault();nudge(e.key==='ArrowLeft'?st.pitch:-st.pitch)});
});
})();