{ "id": "bhaskar/draggable-marquee", "kind": "component", "title": "Draggable Marquee", "summary": "Endless image strip you can grab and fling, with inertia that eases back into the auto-scroll.", "author": "Admin", "stars": 0, "url": "https://ownlyplans.com/bhaskar/draggable-marquee/", "stack": [ "CSS", "HTML", "JavaScript" ], "tools": [ "claude-code", "cursor", "lovable" ], "difficulty": "beginner", "license": "mit", "version": "1.0", "overview": "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.", "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
\"Landscape
\"Landscape
\"Landscape
\"Landscape
\n
\n
", "css": "/* Ported from ObsidianUI (MIT License, Copyright (c) 2026 ObsidianUI) */\n.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}\n.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}\n.op-draggable-marquee:focus-visible{outline:2px solid #a3a3a3}\n.op-draggable-marquee:active{cursor:grabbing}\n.op-dm-track{display:flex;width:max-content;align-items:center;gap:1.25rem;will-change:transform}\n.op-dm-item{flex-shrink:0;border-radius:1rem;overflow:hidden}\n.op-dm-item img{display:block;height:260px;width:200px;border-radius:1rem;object-fit:cover;pointer-events:none}\n@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}}", "js": "(function(){\n document.querySelectorAll('.op-draggable-marquee').forEach(function(root){\n var track=root.querySelector('.op-dm-track'),orig=[].slice.call(track.children),REPEAT=3;\n for(var r=1;r0)v=Math.max(-maxV,Math.min(maxV,(dx/dt)*36.67*throwMul));lastX=x;lastT=now});\n function up(){dragging=false}\n root.addEventListener('pointerup',up);root.addEventListener('pointercancel',up);\n 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()});\n new ResizeObserver(measure).observe(track);measure();requestAnimationFrame(tick);\n });\n})();", "react": "", "dependencies": [], "install": "", "licence_notice": "" } }