Stacked Cards Deck — Free HTML CSS JS Snippet

Stacked card UIs signal depth and discovery — they're used in dating apps, flashcard tools, recommendation feeds, and onboarding sequences to present a curated set of items while hinting more content lies beneath. This snippet builds a five-card dark-theme deck with progressive scale and Y-offset transforms creating a convincing physical stack, smooth exit-left slide animation for dismissal, swipe gesture support, and prev/next controls — all in pure HTML, CSS, and vanilla JavaScript.

Stacked card UIs appear across product categories — Tinder-style swiping, flashcard learning apps, featured article carousels, and onboarding slides all use the visual metaphor of a physical deck to signal that items can be cycled through. This snippet creates a five-card dark-theme deck with a CSS-only depth effect, smooth card exit animations, pointer-event swipe support, and prev/next buttons — built entirely in HTML, CSS, and vanilla JavaScript with zero dependencies.

CSS stack depth with scale and translateY

The depth illusion is achieved by a data-pos attribute that the JavaScript updates on every card after each navigation step. Five [data-pos] CSS rules define the transform for each layer: position 0 (top card) has translateY(0) scale(1) opacity:1, position 1 has translateY(10px) scale(0.97) opacity:0.85, and so on down to position 4 at translateY(40px) scale(0.88) opacity:0.2. The scale shrinks by 3% per layer and Y offset grows by 10px — two parameters you can tune to taste. Because the transforms are applied via CSS and only the data attribute changes in JS, the browser handles interpolation: every card transition between layers animates via transition: transform .45s cubic-bezier(.34,1.56,.64,1). The cubic-bezier is a spring ease (the middle two control points above and beyond 1) giving a slight overshoot that feels physical.

Exit animation with a separate CSS class

When the user advances forward, the top card is given the class exit-left which translates it off-screen to the left while rotating −8° and fading to opacity 0. A setTimeout of 380ms (slightly shorter than the 400ms CSS transition) waits for the animation to finish, then removes the class, increments current, and calls applyPositions() to re-stack the deck. The removed card re-enters at position 4 (bottom of the stack) instantly since its exit-left class is removed before data-pos is recalculated — it snaps to the back position without a visible jump.

Pointer-event swipe detection

Swipe support is implemented with three pointer events: pointerdown records startX, pointerup computes dx = clientX - startX. If |dx| > 50px, the swipe is treated as intentional — left swipe advances, right swipe goes back. Using the Pointer Events API (rather than Touch Events + Mouse Events) gives a single code path that works on touch screens, mouse drag, and stylus input without any e.preventDefault() dance.

Modular rotation: keeping position indices circular

applyPositions() uses modulo arithmetic: (i - current + N) % N maps each card's absolute index to a position 0–N−1 relative to the current top card. This means when current increments past the last card, the modulo wraps earlier cards back to the bottom of the stack without an array splice — the deck is logically circular. Only positions 0–4 are styled; any card at a position ≥ 5 shares position 4's rules and is visually buried.

Customising the deck

Swap the card content for your own data by editing the .card-inner markup — the outer .card wrapper and data-index attribute must remain. Change the number of cards by adding or removing .card divs and updating the five [data-pos] CSS rules to match. The colour scheme lives in two variables at the top of the CSS: the background gradient and the card gradient. Pair with a profile card design for a people-browsing feature.