Draggable Vertical Rectangles HTML

Open In Editor Publish Your Code

CSS

*{ box-sizing: border-box; } html, body { margin: 0; padding: 0; }
:root { --sz: clamp(24px, min(4vw, 6vh) , 42px); font-size: var(--sz); --bg: #09090a; }
body { 
    background: var(--bg); 
    display: flex; flex-direction: row; gap: 1em;
    justify-content: center; align-items: center; 
    min-height: 100vh; overflow: hidden;
}
.vert { position: relative; width: 12em; height: 12em; }
.drag {
    --dvar: 0;
    --xvar: 0;
    --skew: 16;
    --line: 1px;
    --thick: 0.4rem;
    --clr: gray;
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4rem;
    cursor: grab;
    color: #fff;
    transform-style: preserve-3d;
    perspective: 1200px;
    transition: all ease-out 1s;
}
.vert.loaded .drag { transform: rotateX(calc( 1deg * ( var(--skew) - ( 2 * var(--skew) * var(--dvar)) ))); }
.rect {
    position: absolute; margin: auto;
    transform-style: preserve-3d;
    left:0; right:0;
    width: 2rem; height: 100%;
    translate: 4rem;
    transform-origin: -3rem 50%;
    box-shadow: inset 0 0 0 var(--line) var(--clr);
    background: hsl(from var(--bg) h s calc( l + 12) );
    background-size: cover; background-position: center;
    transition: all ease-out 2s;
}
.vert.loaded {
    .rect:nth-child(1)  { transform: rotateY( calc( 360deg * var(--dvar)) ) rotateX( calc( 1deg * var(--xvar))); }
    .rect:nth-child(2)  { transform: rotateY( calc( 360deg * ( 1 /11 + var(--dvar)) )) rotateX( calc( 1deg * var(--xvar))); }
    .rect:nth-child(3)  { transform: rotateY( calc( 360deg * ( 2 /11 + var(--dvar)) )) rotateX( calc( 1deg * var(--xvar))); }
    .rect:nth-child(4)  { transform: rotateY( calc( 360deg * ( 3 /11 + var(--dvar)) )) rotateX( calc( 1deg * var(--xvar))); }
    .rect:nth-child(5)  { transform: rotateY( calc( 360deg * ( 4 /11 + var(--dvar)) )) rotateX( calc( 1deg * var(--xvar))); }
    .rect:nth-child(6)  { transform: rotateY( calc( 360deg * ( 5 /11 + var(--dvar)) )) rotateX( calc( 1deg * var(--xvar))); }
    .rect:nth-child(7)  { transform: rotateY( calc( 360deg * ( 6 /11 + var(--dvar)) )) rotateX( calc( 1deg * var(--xvar))); }
    .rect:nth-child(8)  { transform: rotateY( calc( 360deg * ( 7 /11 + var(--dvar)) )) rotateX( calc( 1deg * var(--xvar))); }
    .rect:nth-child(9)  { transform: rotateY( calc( 360deg * ( 8 /11 + var(--dvar)) )) rotateX( calc( 1deg * var(--xvar))); }
    .rect:nth-child(10) { transform: rotateY( calc( 360deg * ( 9 /11 + var(--dvar)) )) rotateX( calc( 1deg * var(--xvar))); }
    .rect:nth-child(11) { transform: rotateY( calc( 360deg * ( 10/11 + var(--dvar)) )) rotateX( calc( 1deg * var(--xvar))); }
}

.rect:nth-child(1)   { background-image: url('https://picsum.photos/id/43/300');  }
.rect:nth-child(2)   { background-image: url('https://picsum.photos/id/58/300');  }
.rect:nth-child(3)   { background-image: url('https://picsum.photos/id/61/300');  }
.rect:nth-child(4)   { background-image: url('https://picsum.photos/id/79/300');  }
.rect:nth-child(5)   { background-image: url('https://picsum.photos/id/88/300');  }
.rect:nth-child(6)   { background-image: url('https://picsum.photos/id/91/300');  }
.rect:nth-child(7)   { background-image: url('https://picsum.photos/id/115/300'); }
.rect:nth-child(8)   { background-image: url('https://picsum.photos/id/121/300'); }
.rect:nth-child(9)   { background-image: url('https://picsum.photos/id/130/300'); }
.rect:nth-child(10)  { background-image: url('https://picsum.photos/id/192/300'); }
.rect:nth-child(11)  { background-image: url('https://picsum.photos/id/209/300'); }

.rect span:nth-child(1), .rect span:nth-child(2) {
    position: absolute;
    width: var(--thick); height: 100%;
    box-shadow: inset 0 0 0 var(--line) var(--clr);
    transform-origin: 0% 50%;
    background: var(--bg);
}
.rect span:nth-child(1) { transform: rotateY(-90deg); }
.rect span:nth-child(2) { transform: rotateY(-90deg); left: 100%; }
.rect span:nth-child(3), .rect span:nth-child(4) {
    position: absolute;
    width: 100%; height: var(--thick);
    box-shadow: inset 0 0 0 var(--line) var(--clr);
    transform-origin: 50% 0%;
    background: var(--bg);
}
.rect span:nth-child(3) { transform: rotateX(90deg); }
.rect span:nth-child(4) { transform: rotateX(90deg); top: 100%; }
.rect span:nth-child(5) {
    position: absolute;
    width: 100%; height: 100%;
    box-shadow: inset 0 0 0 var(--line) var(--clr);
    transform-origin: 50% 50%;
    transform: translateZ( var(--thick) );
    background: hsl(from var(--bg) h s calc( l - 12) );
}

JS

const vert = document.querySelector('.vert');
const drag = document.querySelector('.drag');
let isDragging = false;
let dragValue = 0;
let clickOffsetY = 0;
let lastTop = 0;
let lastTime = performance.now();
let smoothedVelocity = 0;
const velocityStrength = 164;
const velocityEase = 0.2;
const velocityDecay = 0.1;
let lastUpdateTime = 0;
let rafId = null;
const updateInterval = 10;

document.addEventListener("DOMContentLoaded", function() { vert.classList.add('loaded'); });

drag.addEventListener('mousedown', (e) => {
    lastInteractionTime = performance.now();
    if (idleOscillating) idleOscillating = false;
    isDragging = true;
    const dragRect = drag.getBoundingClientRect();
    clickOffsetY = e.clientY - dragRect.top;
    document.body.style.userSelect = 'none';

lastTop = drag.offsetTop;
    lastTime = performance.now();
});

document.addEventListener('mousemove', (e) => {
    lastInteractionTime = performance.now();
    if (!isDragging || rafId) return;
    if (idleOscillating) idleOscillating = false;

rafId = requestAnimationFrame(() => {
        const now = performance.now();
        const deltaTime = now - lastTime;
        const vertRect = vert.getBoundingClientRect();
        let newTop = e.clientY - vertRect.top - clickOffsetY;
        const maxTop = vert.offsetHeight - drag.offsetHeight;
        newTop = Math.max(0, Math.min(newTop, maxTop));

drag.style.top = `${newTop}px`;
        dragValue = newTop / maxTop;

if (now - lastUpdateTime >= updateInterval) {
            const cleanValue = parseFloat(dragValue.toFixed(4));
            drag.style.setProperty('--dvar', cleanValue);
            lastUpdateTime = now;
        }

const deltaPos = newTop - lastTop;
        const rawVelocity = deltaTime > 0 ? deltaPos / deltaTime : 0;
        smoothedVelocity += (rawVelocity - smoothedVelocity) * velocityEase;
        const outputVelocity = Math.max(-velocityStrength, Math.min(velocityStrength, smoothedVelocity * velocityStrength));
        drag.style.setProperty('--xvar', outputVelocity.toFixed(4));
        lastTop = newTop;
        lastTime = now;
        rafId = null;
    });
});
function easeVelocityToZero() {
    if (isDragging) {
        requestAnimationFrame(easeVelocityToZero);
        return;
    }
    smoothedVelocity += (0 - smoothedVelocity) * velocityDecay;
    const outputVelocity = smoothedVelocity * velocityStrength;

drag.style.setProperty('--xvar', outputVelocity.toFixed(4));

if (Math.abs(smoothedVelocity) > 0.001) {
        requestAnimationFrame(easeVelocityToZero);
    }
}

document.addEventListener('mouseup', () => {
    lastInteractionTime = performance.now();
    if (idleOscillating) idleOscillating = false;
    isDragging = false;
    document.body.style.userSelect = '';
    easeVelocityToZero();
});

let lastInteractionTime = performance.now();
let idleOscillating = false;
let idleStartTime = 0;

Draggable Vertical Rectangles HTML

Recommended

CSS Loading Animation HTML Structure

Animated HTML and CSS Input

HTML Login Form Example

HTML

CSS

JS

Recommended

CSS Loading Animation HTML Structure

Animated HTML and CSS Input

HTML Login Form Example

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS