खींचने योग्य ऊर्ध्वाधर आयत HTML

अनुशंसित

16 March 2024

विस्तार योग्य एनिमेटेड कार्ड स्लाइडर

20 June 2025

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;

खींचने योग्य ऊर्ध्वाधर आयत HTML

अनुशंसित

V1 Html लॉगिन करें

विस्तार योग्य एनिमेटेड कार्ड स्लाइडर

सोशल मीडिया लिंक कार्ड HTML

HTML

CSS

JS

अनुशंसित

V1 Html लॉगिन करें

विस्तार योग्य एनिमेटेड कार्ड स्लाइडर

सोशल मीडिया लिंक कार्ड HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS