Draggable Marquee
Endless image strip you can grab and fling, with inertia that eases back into the auto-scroll.
Preview and code
index.html
<!--
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.
-->
<div class="op-dm-stage">
<div class="op-draggable-marquee" tabindex="0" role="region" aria-label="Image marquee. Drag or use the left and right arrow keys." data-speed="1.5">
<div class="op-dm-track"><div class="op-dm-item"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20420%20520%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%23f6d6b8%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23e08e6d%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22420%22%20height%3D%22520%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%22144%22%20cy%3D%22136%22%20r%3D%2241%22%20fill%3D%22%23fff%22%20opacity%3D%22.85%22/%3E%3Cpolygon%20points%3D%220%2C520%200%2C320%2070%2C283%20140%2C292%20210%2C294%20280%2C320%20350%2C283%20420%2C290%20420%2C520%22%20fill%3D%22%23e08e6d%22/%3E%3Cpolygon%20points%3D%220%2C520%200%2C331%2070%2C369%20140%2C356%20210%2C357%20280%2C346%20350%2C379%20420%2C334%20420%2C520%22%20fill%3D%22%237a4b6b%22/%3E%3Cpolygon%20points%3D%220%2C520%200%2C408%2070%2C448%20140%2C420%20210%2C401%20280%2C440%20350%2C408%20420%2C450%20420%2C520%22%20fill%3D%22%232f2440%22/%3E%3C/svg%3E" alt="Landscape artwork 1" width="200" height="260" draggable="false"></div><div class="op-dm-item"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20420%20520%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%23cfe8ef%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%237fb7c9%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22420%22%20height%3D%22520%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%22230%22%20cy%3D%2295%22%20r%3D%2249%22%20fill%3D%22%23fff%22%20opacity%3D%22.85%22/%3E%3Cpolygon%20points%3D%220%2C520%200%2C245%2070%2C282%20140%2C285%20210%2C267%20280%2C311%20350%2C247%20420%2C285%20420%2C520%22%20fill%3D%22%237fb7c9%22/%3E%3Cpolygon%20points%3D%220%2C520%200%2C322%2070%2C386%20140%2C371%20210%2C343%20280%2C347%20350%2C327%20420%2C343%20420%2C520%22%20fill%3D%22%232f6f8f%22/%3E%3Cpolygon%20points%3D%220%2C520%200%2C422%2070%2C443%20140%2C414%20210%2C409%20280%2C416%20350%2C419%20420%2C424%20420%2C520%22%20fill%3D%22%2316384d%22/%3E%3C/svg%3E" alt="Landscape artwork 2" width="200" height="260" draggable="false"></div><div class="op-dm-item"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20420%20520%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%23efe4cf%22/%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23c9a26b%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width%3D%22420%22%20height%3D%22520%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%22217%22%20cy%3D%22123%22%20r%3D%2245%22%20fill%3D%22%23fff%22%20opacity%3D%22.85%22/%3E%3Cpolygon%20points%3D%220%2C520%200%2C274%2070%2C258%20140%2C303%20210%2C289%20280%2C267%20350%2C320%20420%2C265%20420%2C520%22%20fill%3D%22%23c9a26b%22/%3E%3Cpolygon%20points%3D%220%2C520%200%2C376%2070%2C347%20140%2C379%20210%2C375%20280%2C363%20350%2C367%20420%2C369%20420%2C520%22%20fill%3D%22%236e7f5b%22/%3E%3Cpolygon%20points%3D%220%2C520%200%2C407%2070%2C429%20140%2C407%20210%2C441%20280%2C410%20350%2C446%20420%2C428%20420%2C520%22%20fill%3D%22%232e3b2c%22/%3E%3C/svg%3E" alt="Landscape artwork 3" width="200" height="260" draggable="false"></div><div class="op-dm-item"><img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20420%20520%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%22420%22%20height%3D%22520%22%20fill%3D%22url%28%23g%29%22/%3E%3Ccircle%20cx%3D%22266%22%20cy%3D%22121%22%20r%3D%2252%22%20fill%3D%22%23fff%22%20opacity%3D%22.85%22/%3E%3Cpolygon%20points%3D%220%2C520%200%2C262%2070%2C258%20140%2C258%20210%2C301%20280%2C303%20350%2C327%20420%2C311%20420%2C520%22%20fill%3D%22%23d38fb1%22/%3E%3Cpolygon%20points%3D%220%2C520%200%2C337%2070%2C384%20140%2C318%20210%2C351%20280%2C369%20350%2C363%20420%2C319%20420%2C520%22%20fill%3D%22%238a5a9e%22/%3E%3Cpolygon%20points%3D%220%2C520%200%2C409%2070%2C425%20140%2C444%20210%2C435%20280%2C426%20350%2C452%20420%2C436%20420%2C520%22%20fill%3D%22%233a2b55%22/%3E%3C/svg%3E" alt="Landscape artwork 4" width="200" height="260" draggable="false"></div></div>
</div>
</div>
styles.css
/* Ported from ObsidianUI (MIT License, Copyright (c) 2026 ObsidianUI) */
.op-dm-stage{position:relative;width:100%;height:400px;overflow:hidden;background:#111;color:#fff;display:flex;align-items:center;font-family:Inter,system-ui,sans-serif}
.op-draggable-marquee{position:relative;width:100%;overflow:hidden;cursor:grab;outline-offset:4px;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.op-draggable-marquee:focus-visible{outline:2px solid #a3a3a3}
.op-draggable-marquee:active{cursor:grabbing}
.op-dm-track{display:flex;width:max-content;align-items:center;gap:1.25rem;will-change:transform}
.op-dm-item{flex-shrink:0;border-radius:1rem;overflow:hidden}
.op-dm-item img{display:block;height:260px;width:200px;border-radius:1rem;object-fit:cover;pointer-events:none}
@media (prefers-reduced-motion:reduce){.op-draggable-marquee{overflow-x:auto}.op-dm-track{transform:none!important}.op-dm-item[data-copy="duplicate"]{display:none}}
script.js
(function(){
document.querySelectorAll('.op-draggable-marquee').forEach(function(root){
var track=root.querySelector('.op-dm-track'),orig=[].slice.call(track.children),REPEAT=3;
for(var r=1;r<REPEAT;r++)orig.forEach(function(n){var c=n.cloneNode(true);c.setAttribute('aria-hidden','true');c.dataset.copy='duplicate';track.appendChild(c)});
if(matchMedia('(prefers-reduced-motion: reduce)').matches)return;
var speed=parseFloat(root.dataset.speed||1),throwMul=2.8,friction=.975,maxV=60,loopStart=0,loopEndMul=-1.02;
var setW=0,x=0,v=0,dragging=false,lastX=0,lastT=0,px=0,min=0,max=0;
function wrap(val){var range=max-min;if(!range)return val;return ((((val-min)%range)+range)%range)+min}
function measure(){var gap=parseFloat(getComputedStyle(track).columnGap)||0,w=0;orig.forEach(function(c){w+=c.getBoundingClientRect().width});
var prev=setW?(x-min)/(max-min):null;setW=w+gap*Math.max(0,orig.length-1);min=setW*loopEndMul;max=loopStart;x=prev==null?wrap(0):min+(max-min)*prev;paint()}
function paint(){track.style.transform='translate3d('+x+'px,0,0)'}
function tick(){if(!dragging){x-=speed;x+=v;v*=friction;if(Math.abs(v)<.01)v=0}x=wrap(x);paint();requestAnimationFrame(tick)}
root.addEventListener('pointerdown',function(e){if(e.button!==0)return;dragging=true;v=0;px=e.clientX;lastX=x;lastT=performance.now();root.setPointerCapture(e.pointerId)});
root.addEventListener('pointermove',function(e){if(!dragging)return;var now=performance.now(),nx=x+(e.clientX-px);px=e.clientX;var dx=nx-lastX,dt=now-lastT;x=wrap(nx);paint();
if(dt>0)v=Math.max(-maxV,Math.min(maxV,(dx/dt)*36.67*throwMul));lastX=x;lastT=now});
function up(){dragging=false}
root.addEventListener('pointerup',up);root.addEventListener('pointercancel',up);
root.addEventListener('keydown',function(e){if(e.key!=='ArrowLeft'&&e.key!=='ArrowRight')return;e.preventDefault();x=wrap(x+(e.key==='ArrowLeft'?1:-1)*root.clientWidth*.35);v=0;paint()});
new ResizeObserver(measure).observe(track);measure();requestAnimationFrame(tick);
});
})();About
Endless image strip you can grab and fling, with inertia that eases back into the auto-scroll. 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.