{
"id": "bhaskar/parallax-slider",
"kind": "component",
"title": "Parallax Slider",
"summary": "Endless drag-and-scroll gallery where each image drifts against the motion for a depth effect.",
"author": "Admin",
"stars": 0,
"url": "https://ownlyplans.com/bhaskar/parallax-slider/",
"stack": [
"CSS",
"HTML",
"JavaScript"
],
"tools": [
"claude-code",
"cursor",
"lovable"
],
"difficulty": "beginner",
"license": "mit",
"version": "1.0",
"overview": "Endless drag-and-scroll gallery where each image drifts against the motion for a depth effect. Ported to plain HTML, CSS and JavaScript from ObsidianUI (github.com/Atharvsinh-codez/ObsidianUI), which is released under the MIT License. The original copyright notice is kept in the code.",
"steps": [],
"files": [],
"install": "",
"how_to_use": "Use the component code (html, css, js, or react) directly, or run the install command.",
"component": {
"category": "Motion and entrances",
"html": "\n\n
\n
\n \n
\n
\n",
"css": "/* Ported from ObsidianUI (MIT License, Copyright (c) 2026 ObsidianUI) */\n.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}\n.op-ps-inner{padding-block:var(--space) calc(var(--space) - 1.5rem)}\n.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)}\n.op-parallax-slider[data-dragging=\"true\"] .op-ps-viewport{cursor:grabbing}\n.op-ps-viewport:focus-visible{-webkit-mask-image:none;mask-image:none;box-shadow:inset 0 0 0 2px var(--caption)}\n.op-ps-track{display:flex;width:max-content;height:100%;gap:var(--gap);padding-inline-start:calc(var(--gap) / 2);will-change:transform}\n.op-ps-slide{position:relative;flex:none;width:var(--w);height:var(--h)}\n.op-ps-frame{position:relative;display:block;width:100%;height:100%;overflow:hidden;border-radius:10px;background:var(--frame)}\n.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}\n.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}\n.op-ps-caption svg{flex:none;width:14px;height:14px}\n.op-ps-slide:hover .op-ps-caption{opacity:1}\n@media (hover:none){.op-ps-caption{opacity:1}}\n.op-parallax-slider[data-moving=\"true\"] .op-ps-caption{opacity:0}\n@container (max-width:720px){.op-ps-viewport{--w:200px;--h:356px;--gap:14px;--edge:1.5rem}}\n@media (prefers-reduced-motion:reduce){.op-ps-caption{transition:none}}",
"js": "(function(){\nvar 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\"}];\nvar 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;\nvar ARROW='';\ndocument.querySelectorAll('.op-parallax-slider').forEach(function(root){\n var viewport=root.querySelector('.op-ps-viewport'),track=root.querySelector('.op-ps-track'),count=SLIDES.length,copies=MIN_COPIES;\n function build(n){track.innerHTML='';for(var c=0;c';\n 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)})}\n build(copies);\n var els,images,room;\n 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};\n var startPos=-count*LEAD,releaseTimer=0;\n 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)})})}\n collect();\n function setMoving(m){if(m===st.moving)return;st.moving=m;root.dataset.moving=String(m)}\n 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}}\n 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)'}\n function paint(){track.style.transform='translate3d('+st.current+'px,0,0)';for(var i=0;i=.1||recent);paint();\n if(st.current!==st.target||recent||st.dragged||st.pointer!==null)st.frame=requestAnimationFrame(step);else setMoving(false)}\n function tick(){if(!st.frame)st.frame=requestAnimationFrame(step)}\n function nudge(a){st.target+=a;st.lastInput=performance.now();tick()}\n 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;\n if(prev){st.current*=st.pitch/prev;st.target*=st.pitch/prev}else{st.current=st.target=startPos*st.pitch}\n 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()}\n wrap();paint();images.forEach(function(_,i){fit(i)})}\n new ResizeObserver(measure).observe(viewport);\n 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});\n 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()});\n 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)});\n 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)}\n addEventListener('pointerup',up);addEventListener('pointercancel',up);\n viewport.addEventListener('click',function(e){if(!st.dragged)return;e.preventDefault();e.stopPropagation()},true);\n viewport.addEventListener('keydown',function(e){if(e.key!=='ArrowLeft'&&e.key!=='ArrowRight')return;e.preventDefault();nudge(e.key==='ArrowLeft'?st.pitch:-st.pitch)});\n});\n})();",
"react": "",
"dependencies": [],
"install": "",
"licence_notice": ""
}
}